mirror of
https://git.imnavajas.es/jjimenez/erp-imprimelibros.git
synced 2026-01-20 07:40:22 +00:00
limpieza del proyecto. Transferencias falta devolución
This commit is contained in:
@ -1,588 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Animation')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- aos css -->
|
||||
<link rel="stylesheet" href="/assets/libs/aos/aos.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Animation','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="text-center">
|
||||
<h4 class="card-title mb-0">Fade Animation</h4>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div class="live-preview">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Fade Up</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-up"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-lg-8">
|
||||
<div data-aos="fade-up">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Fade Down</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-down"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-lg-8">
|
||||
<div data-aos="fade-down">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Fade Right</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-right"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-right">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Fade Left</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-left"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-left">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Fade Up Right</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-up-right"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-up-right">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Fade Up Left</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-up-left"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-up-left">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Fade Down Right</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-down-right"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-down-right">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Fade Down Left</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-down-left"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-down-left">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="text-center">
|
||||
<h4 class="card-title mb-0">Flip Animation</h4>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div class="live-preview">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Flip Left</h4>
|
||||
<pre><code class="language-markup"><div data-aos="flip-left"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="flip-left">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Flip Right</h4>
|
||||
<pre><code class="language-markup"><div data-aos="flip-right"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="flip-right">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Flip Up</h4>
|
||||
<pre><code class="language-markup"><div data-aos="flip-up"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="flip-up">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Flip Down</h4>
|
||||
<pre><code class="language-markup"><div data-aos="flip-down"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="flip-down">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="text-center">
|
||||
<h4 class="card-title mb-0">Zoom Animation</h4>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div class="live-preview">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom In</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-in"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-in">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom In Up</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-in-up"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-in-up">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom In Down</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-in-down"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-in-down">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom In Right</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-in-right"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-in-right">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom In Left</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-in-left"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-in-left">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom Out</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-in"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-out">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom Out Up</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-out-up"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-out-up">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom Out Down</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-out-down"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-out-down">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom Out Right</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-out-right"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-out-right">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Zoom Out Left</h4>
|
||||
<pre><code class="language-markup"><div data-aos="zoom-out-left"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="zoom-out-left">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="text-center">
|
||||
<h4 class="card-title mb-0">Animation Examples</h4>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div class="live-preview">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Duration</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-up" data-aos-duration="3000"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-up" data-aos-duration="3000">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Easing="linear"</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-down" data-aos-easing="linear"
|
||||
data-aos-duration="1500">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Offset</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-right" data-aos-offset="300"
|
||||
data-aos-easing="ease-in-sine">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Offset</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-left" data-aos-offset="500" data-aos-duration="500"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-left" data-aos-offset="500"
|
||||
data-aos-duration="500">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Easing="ease-in-back"</h4>
|
||||
<pre><code class="language-markup"><div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back"
|
||||
data-aos-delay="300" data-aos-offset="0">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="p-4 pb-0 border mt-4">
|
||||
<h4 class="mb-4 text-center">Easing="ease-out-cubic"</h4>
|
||||
<pre><code class="language-markup"><div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"></div></code></pre>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-10 col-md-8">
|
||||
<div data-aos="flip-left" data-aos-easing="ease-out-cubic"
|
||||
data-aos-duration="2000">
|
||||
<img src="/assets/images/mac-img.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- aos js -->
|
||||
<script src="/assets/libs/aos/aos.js"></script>
|
||||
<!-- prismjs plugin -->
|
||||
<script src="/assets/libs/prismjs/prism.js"></script>
|
||||
<!-- animation init -->
|
||||
<script src="/assets/js/pages/animation-aos.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,136 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Highlight')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Highlight','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h4 class="card-title mb-0">HTML Highlight</h4>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">HTML highlight is used to mark or highlight text that is of property,
|
||||
relevance, or special interest to an HTML document. here is the example shown below.</p>
|
||||
|
||||
<div class="live-preview">
|
||||
<pre>
|
||||
<code class="language-markup"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Velzon - Responsive Admin Dashboard Template</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1>This is a Heading 1</h1>
|
||||
<h2>This is a Heading 2</h2>
|
||||
<h3>This is a Heading 3</h3>
|
||||
<h4>This is a Heading 4</h4>
|
||||
</div>
|
||||
<!-- end div content -->
|
||||
</body>
|
||||
</html></code></pre>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h4 class="card-title mb-0">CSS Highlight</h4>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">CSS highlight is used to mark or highlight text that is of property,
|
||||
relevance, or special interest to a CSS document. Here is the example shown below.</p>
|
||||
<div class="live-preview">
|
||||
<pre>
|
||||
<code class="language-css">body {
|
||||
color: #212529;
|
||||
background-color: #f3f3f9;
|
||||
font-family: "Poppins",sans-serif;
|
||||
}
|
||||
|
||||
.example {
|
||||
margin: 0;
|
||||
color: #74788d;
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h4 class="card-title mb-0">Javascript Highlight</h4>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Javascript highlight is used to mark or highlight text that is of
|
||||
property, relevance, or special interest to a Javascript document. Here is the example shown
|
||||
below.</p>
|
||||
<div class="live-preview">
|
||||
<pre>
|
||||
<code class="language-js">function myFunction() {
|
||||
var divElement = document.getElementById("myDIV");
|
||||
if (divElement.style.display === "none") {
|
||||
divElement.style.display = "block";
|
||||
} else {
|
||||
divElement.style.display = "none";
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- prismjs plugin -->
|
||||
<script src="/assets/libs/prismjs/prism.js"></script>
|
||||
|
||||
<!-- rater-js plugin -->
|
||||
<script src="/assets/libs/rater-js/index.js"></script>
|
||||
|
||||
<!-- swiper.init js -->
|
||||
<script src="/assets/js/pages/rating.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,357 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Nestable List')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Nestable List','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Nested Sortables List</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>nested-list nested-sortable</code> class to list-group class to
|
||||
set a nested list with sortable items.</p>
|
||||
|
||||
<div class="list-group col nested-list nested-sortable">
|
||||
<div class="list-group-item nested-1">Item 1.1</div>
|
||||
<div class="list-group-item nested-1">Item 1.2
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-2">Item 2.1</div>
|
||||
<div class="list-group-item nested-2">Item 2.2
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-3">Item 3.1</div>
|
||||
<div class="list-group-item nested-3">Item 3.2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item nested-1">Item 1.3
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-2">Item 2.1</div>
|
||||
<div class="list-group-item nested-2">Item 2.2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Nested Sortables List with Handle</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>nested-list nested-sortable-handle</code> class to list-group
|
||||
class to set a nested list with sortable items.</p>
|
||||
|
||||
<div class="list-group col nested-list nested-sortable-handle">
|
||||
<div class="list-group-item nested-1"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 1.1
|
||||
<div class="list-group nested-list nested-sortable-handle">
|
||||
<div class="list-group-item nested-2"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 2.1</div>
|
||||
<div class="list-group-item nested-2"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 2.2
|
||||
<div class="list-group nested-list nested-sortable-handle">
|
||||
<div class="list-group-item nested-3"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 3.1</div>
|
||||
<div class="list-group-item nested-3"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 3.2</div>
|
||||
<div class="list-group-item nested-3"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 3.3</div>
|
||||
<div class="list-group-item nested-3"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 3.4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item nested-2"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 2.3</div>
|
||||
<div class="list-group-item nested-2"><i
|
||||
class="ri-drag-move-fill align-bottom handle"></i>Item 2.4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Folder Structure Nested List</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>nested-list nested-sortable</code> class to list-group class to
|
||||
set a nested list with sortable items where icons are given within list-group-item.</p>
|
||||
|
||||
<div class="list-group col nested-list nested-sortable">
|
||||
<div class="list-group-item nested-1"> <i
|
||||
class="mdi mdi-folder fs-16 align-middle text-warning me-2"></i> assets
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-2"> <i
|
||||
class="mdi mdi-folder fs-16 align-middle text-warning me-2"></i> css
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-3"><i
|
||||
class="mdi mdi-language-css3 fs-16 align-middle text-secondary me-2"></i>
|
||||
style.css</div>
|
||||
<div class="list-group-item nested-3"><i
|
||||
class="mdi mdi-language-css3 fs-16 align-middle text-secondary me-2"></i>
|
||||
style.min.css</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item nested-2"> <i
|
||||
class="mdi mdi-folder fs-16 align-middle text-warning me-2"></i> Images
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-3"><i
|
||||
class="mdi mdi-image fs-16 align-middle text-info me-2"></i>
|
||||
logo.png</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item nested-2"> <i
|
||||
class="mdi mdi-folder fs-16 align-middle text-warning me-2"></i> js
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-3"><i
|
||||
class="mdi mdi-language-javascript fs-16 align-middle text-warning me-2"></i>
|
||||
app.js</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item nested-2"> <i
|
||||
class="mdi mdi-language-html5 fs-16 align-middle text-danger me-2"></i>
|
||||
index.html</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Navigation Nested List</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>nested-list nested-sortable</code> class to list-group class to
|
||||
set a nested list with sortable items where the list is shown with navigation.</p>
|
||||
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-1"> <i
|
||||
class="ri-dashboard-2-line fs-16 align-middle text-primary me-2"></i> Dashboards
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-2">Analytics</div>
|
||||
<div class="list-group-item nested-2">CRM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item nested-1"> <i
|
||||
class="ri-apps-2-line fs-16 align-middle text-primary me-2"></i> Apps
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-2">Calendar</div>
|
||||
<div class="list-group-item nested-2">Chat</div>
|
||||
<div class="list-group-item nested-2">Email</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item nested-1"> <i
|
||||
class="ri-account-circle-line fs-16 align-middle text-primary me-2"></i>
|
||||
Authentication
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-2">Sign In</div>
|
||||
<div class="list-group-item nested-2">Sign Up</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Team Nested List</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>nested-list nested-sortable</code> class to list-group class to
|
||||
set a nested list with sortable items where images are attached within a list-group-item div
|
||||
element.</p>
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-1">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-1.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Daryl Wolcott</h5>
|
||||
<p class="text-muted mb-0">CEO</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Jacob Stanfield</h5>
|
||||
<p class="text-muted mb-0">Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">David Houser</h5>
|
||||
<p class="text-muted mb-0">Lead Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<div class="avatar-title rounded-circle">
|
||||
<i class="ri-user-2-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Jame Baker</h5>
|
||||
<p class="text-muted mb-0">UI/UX Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-4.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Mickie Reyes</h5>
|
||||
<p class="text-muted mb-0">Frontend Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<div class="avatar-title rounded-circle">
|
||||
<i class="ri-user-2-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Thomas Perez</h5>
|
||||
<p class="text-muted mb-0">Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item nested-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<div class="avatar-title rounded-circle">
|
||||
<img src="/assets/images/users/avatar-5.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Kim Wilson</h5>
|
||||
<p class="text-muted mb-0">Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-6.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Galen Coble</h5>
|
||||
<p class="text-muted mb-0">Backend Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group nested-list nested-sortable">
|
||||
<div class="list-group-item nested-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-7.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Jean Wood</h5>
|
||||
<p class="text-muted mb-0">Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end nested list -->
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- sortablejs -->
|
||||
<script src="/assets/libs/sortablejs/Sortable.min.js"></script>
|
||||
|
||||
<!-- nestable init js -->
|
||||
<script src="/assets/js/pages/nestable.init.js"></script>
|
||||
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,146 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Ratings')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Ratings','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Rater Js</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Rater-js is a star rating widget for the browser. here are the various
|
||||
examples of rating shown below with variation.</p>
|
||||
<div class="live-preview">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Title</th>
|
||||
<th scope="col">Example</th>
|
||||
<th scope="col">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Basic Rater</th>
|
||||
<td>
|
||||
<div id="basic-rater" dir="ltr"></div>
|
||||
</td>
|
||||
<td>
|
||||
<pre><code class="language-markup"><div id="basic-rater" dir="ltr"></div></code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Rater with Step</th>
|
||||
<td>
|
||||
<div id="rater-step" dir="ltr"></div>
|
||||
</td>
|
||||
<td>
|
||||
<pre><code class="language-markup"><div id="rater-step" dir="ltr"></div></code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Custom Messages</th>
|
||||
<td>
|
||||
<div id="rater-message" dir="ltr"></div>
|
||||
</td>
|
||||
<td>
|
||||
<pre><code class="language-markup"><div id="rater-message" dir="ltr"></div></code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Example with unlimited number of stars. readOnly option is
|
||||
set to true.</th>
|
||||
<td>
|
||||
<div id="rater-unlimitedstar" dir="ltr"></div>
|
||||
</td>
|
||||
<td>
|
||||
<pre><code class="language-markup"><div id="rater-unlimitedstar" dir="ltr"></div></code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">On Hover Event</th>
|
||||
<td>
|
||||
<div dir="ltr">
|
||||
<div id="rater-onhover" class="align-middle"></div>
|
||||
<span class="ratingnum badge bg-info align-middle ms-2"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<pre><code class="language-markup"><div dir="ltr">
|
||||
<div id="rater-onhover" class="align-middle"></div>
|
||||
<span class="ratingnum badge bg-info align-middle ms-2"></span>
|
||||
</div></code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">Clear/Reset Rater</th>
|
||||
<td>
|
||||
<div dir="ltr">
|
||||
<div id="raterreset" class="align-middle"></div>
|
||||
<span class="clear-rating"></span>
|
||||
<button id="raterreset-button"
|
||||
class="btn btn-light btn-sm ms-2">Reset</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<pre><code class="language-markup"><div dir="ltr">
|
||||
<div id="raterreset" class="align-middle"></div>
|
||||
<span class="clear-rating"></span>
|
||||
<button id="raterreset-button" class="btn btn-light btn-sm ms-2">Reset</button>
|
||||
</div></code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
<!-- end table responsive -->
|
||||
</div>
|
||||
|
||||
<div class="d-none code-view">
|
||||
<pre><code class="language-markup"><div data-simplebar style="max-height: 220px;">
|
||||
...
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- prismjs plugin -->
|
||||
<script src="/assets/libs/prismjs/prism.js"></script>
|
||||
|
||||
<!-- rater-js plugin -->
|
||||
<script src="/assets/libs/rater-js/index.js"></script>
|
||||
|
||||
<!-- swiper.init js -->
|
||||
<script src="/assets/js/pages/rating.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,961 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Scrollbar')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Scrollbar','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Default Scroll</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar</code> attribute and add
|
||||
<code>max-height: **px</code> to set default scrollbar.
|
||||
</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar style="max-height: 220px;" class="px-3">
|
||||
<p>If several languages coalesce, the grammar of the resulting language is more simple
|
||||
and regular than that of the individual languages. The new common language will be
|
||||
more simple and regular than the existing</p>
|
||||
<p>To an English person, it will seem like simplified English, as a skeptical Cambridge
|
||||
friend of mine told me what Occidental is. The European languages are members of the
|
||||
same family. Their separate existence is a myth. For science, music, sport, etc,
|
||||
Europe uses the same vocabulary.</p>
|
||||
<p>The languages only differ in their grammar, their pronunciation and their most common
|
||||
words. Everyone realizes why a new common language would be desirable: one could
|
||||
refuse to pay expensive translators. To achieve this, it would be necessary to have
|
||||
uniform grammar, pronunciation and more common words.</p>
|
||||
<p>Their separate existence is a myth. For science, music, sport, etc, Europe uses the
|
||||
same vocabulary. The languages only differ in their grammar, their pronunciation and
|
||||
their most common words.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Auto Hide False</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-auto-hide="false"</code> attribute and add
|
||||
<code>max-height: **px</code> to show simplebar as default.
|
||||
</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-auto-hide="false" style="max-height: 220px;"
|
||||
class="px-3">
|
||||
<p>If several languages coalesce, the grammar of the resulting language is more simple
|
||||
and regular than that of the individual languages. The new common language will be
|
||||
more simple and regular than the existing</p>
|
||||
<p>To an English person, it will seem like simplified English, as a skeptical Cambridge
|
||||
friend of mine told me what Occidental is. The European languages are members of the
|
||||
same family. Their separate existence is a myth. For science, music, sport, etc,
|
||||
Europe uses the same vocabulary.</p>
|
||||
<p>The languages only differ in their grammar, their pronunciation and their most common
|
||||
words. Everyone realizes why a new common language would be desirable: one could
|
||||
refuse to pay expensive translators. To achieve this, it would be necessary to have
|
||||
uniform grammar, pronunciation and more common words.</p>
|
||||
<p class="mb-0">Their separate existence is a myth. For science, music, sport, etc,
|
||||
Europe uses the same vocabulary. The languages only differ in their grammar, their
|
||||
pronunciation and their most common words.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">RTL Direction</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-direction="rtl"</code> attribute and add
|
||||
<code>max-height: **px</code> to set simplebar at right side.
|
||||
</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-direction="rtl" style="max-height: 220px;" class="px-3">
|
||||
<p>If several languages coalesce, the grammar of the resulting language is more simple
|
||||
and regular than that of the individual languages. The new common language will be
|
||||
more simple and regular than the existing</p>
|
||||
<p>To an English person, it will seem like simplified English, as a skeptical Cambridge
|
||||
friend of mine told me what Occidental is. The European languages are members of the
|
||||
same family. Their separate existence is a myth. For science, music, sport, etc,
|
||||
Europe uses the same vocabulary.</p>
|
||||
<p>The languages only differ in their grammar, their pronunciation and their most common
|
||||
words. Everyone realizes why a new common language would be desirable: one could
|
||||
refuse to pay expensive translators. To achieve this, it would be necessary to have
|
||||
uniform grammar, pronunciation and more common words.</p>
|
||||
<p>Their separate existence is a myth. For science, music, sport, etc, Europe uses the
|
||||
same vocabulary. The languages only differ in their grammar, their pronunciation and
|
||||
their most common words.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row mt-2">
|
||||
<div class="col-lg-12">
|
||||
<div class="justify-content-between d-flex align-items-center mb-3">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Simplebar Track Color</h5>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Primary Track</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-track="primary"</code> attribute to set
|
||||
primary color simplebar track.</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-auto-hide="false" data-simplebar-track="primary"
|
||||
style="max-height: 275px;">
|
||||
<a href="#!" class="text-reset notification-item d-block dropdown-item">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title bg-soft-info text-info rounded-circle fs-16">
|
||||
<i class="ri-checkbox-circle-fill"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted">
|
||||
<p class="m-0">Your <span class="fw-semibold text-dark">Elite</span>
|
||||
author Graphic Optimization <span
|
||||
class="text-secondary">reward</span> is ready!</p>
|
||||
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="fs-11 text-muted">
|
||||
<i class="mdi mdi-clock-outline"></i> 30 min ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#!" class="text-reset notification-item d-block dropdown-item active">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<img src="/assets/images/users/avatar-2.jpg"
|
||||
class="rounded-circle img-fluid" alt="user-pic">
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted">
|
||||
<h6 class="mb-1 fs-14">Angela Bernier</h6>
|
||||
<p class="mb-0">Answered to your comment on the cash flow forecast's
|
||||
graph 🔔.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="fs-11 text-muted">
|
||||
<i class="mdi mdi-clock-outline"></i> 01 hr ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#!" class="text-reset notification-item d-block dropdown-item">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title bg-soft-danger text-danger rounded-circle fs-16">
|
||||
<i class="ri-message-2-fill"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted">
|
||||
<p class="m-0">You have received <span
|
||||
class="fw-semibold text-success">20</span> new messages in
|
||||
the conversation</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="fs-11 text-muted">
|
||||
<i class="mdi mdi-clock-outline"></i> 02 hrs ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#!" class="text-reset notification-item d-block dropdown-item">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<img src="/assets/images/users/avatar-8.jpg"
|
||||
class="rounded-circle img-fluid" alt="user-pic">
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted">
|
||||
<h6 class="mb-1 fs-14">Maureen Gibson</h6>
|
||||
<p class="mb-0">We talked about a project on linkedin.</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="fs-11 text-muted">
|
||||
<i class="mdi mdi-clock-outline"></i> 02 hrs ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#!" class="text-reset notification-item d-block dropdown-item">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title bg-soft-info text-info rounded-circle fs-16">
|
||||
<i class="ri-checkbox-circle-fill"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted">
|
||||
<p class="m-0">Your <span class="fw-semibold text-dark">Elite</span>
|
||||
author Graphic Optimization <span
|
||||
class="text-secondary">reward</span> is ready!</p>
|
||||
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="fs-11 text-muted">
|
||||
<i class="mdi mdi-clock-outline"></i> 30 min ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="text-center my-2">
|
||||
<a href="javascript:void(0);" class="text-success"><i
|
||||
class="mdi mdi-loading mdi-spin fs-20 align-middle me-2"></i> Load
|
||||
more </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Secondary Track</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-track="secondary"</code> attribute to set
|
||||
secondary color simplebar track.</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-auto-hide="false"
|
||||
data-simplebar-track="secondary" style="max-height: 274px;">
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item text-muted py-3">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-shrink-0 align-self-center me-3">
|
||||
<div class="avatar-xs">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-light text-primary">
|
||||
M
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Michael Johnston</h5>
|
||||
<p class="text-truncate mb-0">New updates for ABC Theme</p>
|
||||
</div>
|
||||
<div class="fs-11">06 mins</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item text-muted py-3">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-shrink-0 align-self-center me-3">
|
||||
<div class="avatar-xs">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-light text-primary">
|
||||
D
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Darren James</h5>
|
||||
<p class="text-truncate mb-0">Bug Report - abc theme</p>
|
||||
</div>
|
||||
<div class="fs-11">12 mins</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item text-muted py-3">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-shrink-0 align-self-center me-3">
|
||||
<div class="avatar-xs">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-light text-primary">
|
||||
P
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Patricia Shelton</h5>
|
||||
<p class="text-truncate mb-0">Nice to meet you</p>
|
||||
</div>
|
||||
<div class="fs-11">28 mins</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-group-item text-muted py-3">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-shrink-0 align-self-center me-3">
|
||||
<div class="avatar-xs">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-light text-primary">
|
||||
T
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Thomas McNeil</h5>
|
||||
<p class="text-truncate mb-0">This theme is awesome!</p>
|
||||
</div>
|
||||
<div class="fs-11">02 hrs</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-group-item text-muted py-3">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-shrink-0 align-self-center me-3">
|
||||
<div class="avatar-xs">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-light text-primary">
|
||||
C
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Carolyn Jones</h5>
|
||||
<p class="text-truncate mb-0">I've finished it! See you so</p>
|
||||
</div>
|
||||
<div class="fs-11">03 hrs</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item text-muted py-3">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-shrink-0 align-self-center me-3">
|
||||
<div class="avatar-xs">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-light text-primary">
|
||||
M
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Michael Johnston</h5>
|
||||
<p class="text-truncate mb-0">New updates for ABC Theme</p>
|
||||
</div>
|
||||
<div class="fs-11">03 hrs</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Success Track</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-track="success"</code> attribute to set
|
||||
success color simplebar track.</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-auto-hide="false" data-simplebar-track="success"
|
||||
style="max-height: 274px;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div>2019 - 21</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mx-3">
|
||||
<i class="ri-arrow-right-fill text-muted"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Lead designer / Developer
|
||||
</h5>
|
||||
<div class="text-truncate">Xyz Company</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div>2017 - 19</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mx-3">
|
||||
<i class="ri-arrow-right-fill text-muted"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Senior Graphic Designer
|
||||
</h5>
|
||||
<div class="text-truncate">Abc Company</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div>2016 - 17</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mx-3">
|
||||
<i class="ri-arrow-right-fill text-muted"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Graphic Designer</h5>
|
||||
<div class="text-truncate">Xyz Company</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div>2017 - 16</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mx-3">
|
||||
<i class="ri-arrow-right-fill text-muted"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Graphic Designer</h5>
|
||||
<div class="text-truncate">Abc Company</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div>2016 - 15</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mx-3">
|
||||
<i class="ri-arrow-right-fill text-muted"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 text-muted overflow-hidden">
|
||||
<h5 class="text-truncate fs-14 mb-1">Graphic Designer</h5>
|
||||
<div class="text-truncate">Xyz Company</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Info Track</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-track="info"</code> attribute to set info
|
||||
color simplebar track.</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-auto-hide="false" data-simplebar-track="info"
|
||||
style="max-height: 238px;">
|
||||
<ol class="list-group list-group-flush list-group-numbered">
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
A list item
|
||||
<span class="badge ms-auto bg-success">Paid</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
A second list item
|
||||
<span class="badge ms-auto bg-danger">Refund</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
A third list item
|
||||
<span class="badge ms-auto bg-success">Paid</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
A fourth list item
|
||||
<span class="badge ms-auto bg-success">Paid</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
A Fifth list item
|
||||
<span class="badge ms-auto bg-warning">Inprogress</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
A Sixth list item
|
||||
<span class="badge ms-auto bg-success">Paid</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Warning Track</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-track="warning"</code> attribute to set
|
||||
warning color simplebar track.</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-auto-hide="false" data-simplebar-track="warning"
|
||||
style="max-height: 220px;" class="px-3">
|
||||
<div class="d-flex align-items-center py-3">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="fs-14 mb-1">Esther James</h5>
|
||||
<p class="fs-13 text-muted mb-0">Frontend Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-success"><i
|
||||
class="ri-user-add-line align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center py-3">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-4.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="fs-14 mb-1">Jacqueline Steve</h5>
|
||||
<p class="fs-13 text-muted mb-0">UI/UX Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-success"><i
|
||||
class="ri-user-add-line align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center py-3">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-5.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="fs-14 mb-1">George Whalen</h5>
|
||||
<p class="fs-13 text-muted mb-0">Backend Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-success"><i
|
||||
class="ri-user-add-line align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center py-3">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt=""
|
||||
class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="fs-14 mb-1">Carl Lynch</h5>
|
||||
<p class="fs-13 text-muted mb-0">Frontend Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-success"><i
|
||||
class="ri-user-add-line align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Danger Track</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-track="danger"</code> attribute to set
|
||||
danger color simplebar track.</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-auto-hide="false" data-simplebar-track="danger"
|
||||
style="max-height: 220px;" class="px-3">
|
||||
<a href="#" class="d-flex align-items-center py-2">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<div class="avatar-title bg-light text-primary rounded-circle">
|
||||
<i class="ri-hashtag"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-14 mb-1">ABC Project Customization</h5>
|
||||
<p class="text-muted mb-0">04 Members</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 align-self-start ms-2">
|
||||
<div class="badge badge-soft-warning fs-10">Inprogress</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="d-flex align-items-center py-2">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<div class="avatar-title bg-light text-primary rounded-circle">
|
||||
<i class="ri-hashtag"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-14 mb-1">Client - John</h5>
|
||||
<p class="text-muted mb-0">02 Members</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 align-self-start ms-2">
|
||||
<div class="badge badge-soft-warning fs-10">Inprogress</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="d-flex align-items-center py-2">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<div class="avatar-title bg-light text-primary rounded-circle">
|
||||
<i class="ri-hashtag"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-14 mb-1">Brand logo Design</h5>
|
||||
<p class="text-muted mb-0">01 Members</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 align-self-start ms-2">
|
||||
<div class="badge badge-soft-success fs-10">Completed</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="d-flex align-items-center py-2">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<div class="avatar-title bg-light text-primary rounded-circle">
|
||||
<i class="ri-hashtag"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-14 mb-1">Project update</h5>
|
||||
<p class="text-muted mb-0">03 Members</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 align-self-start ms-2">
|
||||
<div class="badge badge-soft-warning fs-10">Inprogress</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="d-flex align-items-center py-2">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<div class="avatar-title bg-light text-primary rounded-circle">
|
||||
<i class="ri-hashtag"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-14 mb-1">Chat App</h5>
|
||||
<p class="text-muted mb-0">05 Members</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 align-self-start ms-2">
|
||||
<div class="badge badge-soft-success fs-10">Completed</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Dark Track</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-simplebar-track="dark"</code> attribute to set dark
|
||||
color simplebar track.</p>
|
||||
|
||||
<div class="mx-n3">
|
||||
<div data-simplebar data-simplebar-auto-hide="false" data-simplebar-track="dark"
|
||||
style="max-height: 220px;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<div>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<div class="badge bg-success bg-gradient mb-2"><i
|
||||
class="mdi mdi-star"></i> 4.1</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13">12 Jul, 21</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-4">It will be as simple as in fact, It will
|
||||
seem like simplified</p>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Michael Lemire</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<div class="hstack gap-3">
|
||||
<div data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Like">
|
||||
<a href="#" class="text-muted"><i
|
||||
class="ri-thumb-up-line"></i></a>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Comment">
|
||||
<a href="#" class="text-muted"><i
|
||||
class="ri-discuss-line"></i></a>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="dropdown">
|
||||
<a class="text-muted" href="#"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another
|
||||
action</a>
|
||||
<a class="dropdown-item" href="#">Something else
|
||||
here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<div class="badge bg-success bg-gradient mb-2"><i
|
||||
class="mdi mdi-star"></i> 4.0</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13">06 Jul, 21</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted mb-4">Sed ut perspiciatis iste error sit</p>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Carl Lynch</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<div class="hstack gap-3">
|
||||
<div data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Like">
|
||||
<a href="#" class="text-muted"><i
|
||||
class="ri-thumb-up-line"></i></a>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Comment">
|
||||
<a href="#" class="text-muted"><i
|
||||
class="ri-discuss-line"></i></a>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="dropdown">
|
||||
<a class="text-muted" href="#"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another
|
||||
action</a>
|
||||
<a class="dropdown-item" href="#">Something else
|
||||
here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
<div>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<div class="badge bg-success bg-gradient mb-2"><i
|
||||
class="mdi mdi-star"></i> 4.2</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13">26 Jun, 21</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted mb-4">Neque porro quisquam est, qui dolorem
|
||||
ipsum quia dolor sit amet</p>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Joyce White</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<div class="hstack gap-3">
|
||||
<div data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Like">
|
||||
<a href="#" class="text-muted"><i
|
||||
class="ri-thumb-up-line"></i></a>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Comment">
|
||||
<a href="#" class="text-muted"><i
|
||||
class="ri-discuss-line"></i></a>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="dropdown">
|
||||
<a class="text-muted" href="#"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another
|
||||
action</a>
|
||||
<a class="dropdown-item" href="#">Something else
|
||||
here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
<div>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<div class="badge bg-success bg-gradient mb-2"><i
|
||||
class="mdi mdi-star"></i> 4.1</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13">24 Jun, 21</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted mb-4">Ut enim ad minima veniam, quis nostrum
|
||||
ullam corporis suscipit consequatur nisi ut</p>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Etta Smith</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<div class="hstack gap-3">
|
||||
<div data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Like">
|
||||
<a href="#" class="text-muted"><i
|
||||
class="ri-thumb-up-line"></i></a>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Comment">
|
||||
<a href="#" class="text-muted"><i
|
||||
class="ri-discuss-line"></i></a>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="dropdown">
|
||||
<a class="text-muted" href="#"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another
|
||||
action</a>
|
||||
<a class="dropdown-item" href="#">Something else
|
||||
here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- sortablejs -->
|
||||
<script src="/assets/libs/sortablejs/Sortable.min.js"></script>
|
||||
|
||||
<!-- nestable init js -->
|
||||
<script src="/assets/js/pages/nestable.init.js"></script>
|
||||
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,477 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('ScrollSpy')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('ScrollSpy','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Scrollspy in Navbar</h4>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="form-check form-switch form-switch-right form-switch-md">
|
||||
<label for="navbarscrollspy-showcode" class="form-label text-muted">Show Code</label>
|
||||
<input class="form-check-input code-switcher" type="checkbox"
|
||||
id="navbarscrollspy-showcode">
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-bs-spy="scroll"</code> attribute to update links in a
|
||||
navigation list based on the current scroll position. Scroll the area below the navbar and
|
||||
watch the active class change.</p>
|
||||
|
||||
<div class="live-preview">
|
||||
<nav id="navbar-example" class="navbar navbar-dark bg-light px-3">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="assets/images/logo-dark.png" class="card-logo card-logo-dark"
|
||||
alt="logo dark" height="14">
|
||||
<img src="assets/images/logo-light.png" class="card-logo card-logo-light"
|
||||
alt="logo light" height="14">
|
||||
</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#"
|
||||
role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#three">three</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example" class="scrollspy-example p-2"
|
||||
data-bs-offset="8">
|
||||
<div class="text-muted">
|
||||
<h5 id="fat">@fat</h5>
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
|
||||
praesentium voluptatum deleniti atque corrupti quos dolores et quas
|
||||
molestias excepturi sint occaecati cupiditate non provident, similique
|
||||
sunt in culpa qui officia deserunt mollitia animi, id est laborum et
|
||||
dolorum fuga.</p>
|
||||
<h5 id="mdo">@mdo</h5>
|
||||
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
|
||||
impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
|
||||
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
|
||||
aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
|
||||
voluptates repudiandae sint et molestiae non recusandae., sed quia non
|
||||
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
||||
quaerat voluptatem.</p>
|
||||
<h5 id="one">one</h5>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim
|
||||
lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights
|
||||
whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
|
||||
booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
|
||||
hoodie minim qui you probably haven't heard of them et cardigan trust
|
||||
fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,
|
||||
cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<h5 id="two">two</h5>
|
||||
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
|
||||
consectetur, adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
|
||||
ad minima veniam.</p>
|
||||
<h5 id="three">three</h5>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
|
||||
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
|
||||
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
|
||||
odit aut fugit</p>
|
||||
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
||||
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur autem vel
|
||||
eum iure reprehenderit qui in ea voluptate velit esse quam nihil
|
||||
molestiae consequatur, vel illum qui dolorem eum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end live preview -->
|
||||
|
||||
<div class="d-none code-view">
|
||||
<pre><code class="language-markup"><nav id="navbar-example" class="navbar navbar-dark bg-light px-3">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="..." alt="...">
|
||||
</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#three">three</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</code>
|
||||
<code class="language-markup"><div data-bs-spy="scroll" data-bs-target="#navbar-example" class="scrollspy-example p-2" data-bs-offset="8">
|
||||
<div class="text-muted">
|
||||
<h5 id="fat">@fat</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="mdo">@mdo</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="one">one</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="two">two</h5>
|
||||
<p>...</p>
|
||||
<h5 id="three">three</h5>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Scrollspy with nested nav</h4>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="form-check form-switch form-switch-right form-switch-md">
|
||||
<label for="nestednavscrollspy-showcode" class="form-label text-muted">Show Code</label>
|
||||
<input class="form-check-input code-switcher" type="checkbox"
|
||||
id="nestednavscrollspy-showcode">
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-bs-spy="scroll"</code> attribute. Scrollspy also works with
|
||||
nested nav. If a nested nav is active, its parents will also be active. Scroll the area next
|
||||
to the navbar and watch the active class change.</p>
|
||||
<div class="live-preview">
|
||||
<div class="row gy-4">
|
||||
<div class="col-xxl-3">
|
||||
<nav id="navbar-examplenested" class="navbar navbar-dark bg-light flex-column">
|
||||
<a class="navbar-brand mb-2" href="#">
|
||||
<img src="assets/images/logo-dark.png" class="card-logo card-logo-dark"
|
||||
alt="logo dark" height="15">
|
||||
<img src="assets/images/logo-light.png" class="card-logo card-logo-light"
|
||||
alt="logo light" height="15">
|
||||
</a>
|
||||
<nav class="nav nav-pills flex-column p-3 w-100">
|
||||
<a class="nav-link" href="#item-1"><i
|
||||
class="ri-dashboard-2-line align-middle me-2 fs-16"></i>
|
||||
<span>Dashboards</span></a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1-1"><i
|
||||
class="ri-subtract-fill align-middle me-2 fs-15"></i>
|
||||
<span>Ecommerce</span></a>
|
||||
<a class="nav-link" href="#item-1-2"><i
|
||||
class="ri-subtract-fill align-middle me-2 fs-15"></i>
|
||||
<span>Analytics</span></a>
|
||||
</nav>
|
||||
<a class="nav-link active" href="#item-2"><i
|
||||
class="ri-pencil-ruler-2-line align-middle me-2 fs-16"></i>
|
||||
<span>Base UI</span></a>
|
||||
<a class="nav-link" href="#item-3"><i
|
||||
class="ri-apps-2-line align-middle me-2 fs-16"></i>
|
||||
<span>Apps</span></a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-3-1"><i
|
||||
class="ri-subtract-fill align-middle me-2 fs-15"></i>
|
||||
<span>Chat</span></a>
|
||||
<a class="nav-link" href="#item-3-2"><i
|
||||
class="ri-subtract-fill align-middle me-2 fs-15"></i>
|
||||
<span>Email</span></a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xxl-9">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-examplenested" data-bs-offset="0"
|
||||
class="scrollspy-example-2">
|
||||
<div class="text-muted">
|
||||
<h5 id="item-1">Item 1</h5>
|
||||
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat
|
||||
ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco
|
||||
cillum consectetur ut et aute consectetur labore. Fugiat laborum
|
||||
incididunt tempor eu consequat enim dolore proident. Qui laborum do
|
||||
non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua
|
||||
officia quis et incididunt voluptate non anim reprehenderit
|
||||
adipisicing dolore ut consequat deserunt mollit dolore. Aliquip
|
||||
nulla enim veniam non fugiat id cupidatat nulla elit cupidatat
|
||||
commodo velit ut eiusmod cupidatat elit dolore.</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum
|
||||
commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse
|
||||
voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur
|
||||
irure consequat id quis ea. Sit proident ullamco aute magna pariatur
|
||||
nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do
|
||||
duis amet proident magna consectetur consequat eu commodo fugiat non
|
||||
quis. Enim aliquip exercitation ullamco adipisicing voluptate
|
||||
excepteur minim exercitation minim minim commodo adipisicing
|
||||
exercitation officia nisi adipisicing. Anim id duis qui consequat
|
||||
labore adipisicing sint dolor elit cillum anim et fugiat.</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate
|
||||
pariatur laborum sunt enim. Irure laboris mollit consequat
|
||||
incididunt sint et culpa culpa incididunt adipisicing magna magna
|
||||
occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore
|
||||
enim consectetur in labore anim. Proident ullamco ipsum esse elit ut
|
||||
Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat
|
||||
eiusmod velit incididunt.</p>
|
||||
<h5 id="item-2">Item 2</h5>
|
||||
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum
|
||||
aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est
|
||||
in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit
|
||||
elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit
|
||||
aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore
|
||||
officia laborum excepteur commodo non commodo dolor excepteur
|
||||
commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt
|
||||
in proident.</p>
|
||||
<h5 id="item-3">Item 3</h5>
|
||||
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit
|
||||
culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat
|
||||
excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor
|
||||
mollit elit ex pariatur dolore velit fugiat mollit culpa irure
|
||||
ullamco est ex ullamco excepteur.</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem
|
||||
proident nostrud. Ea id dolore anim exercitation aute fugiat labore
|
||||
voluptate cillum do laboris labore. Ex velit exercitation nisi enim
|
||||
labore reprehenderit labore nostrud ut ut. Esse officia sunt duis
|
||||
aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco
|
||||
proident veniam laboris ea consectetur magna sunt ex exercitation
|
||||
aliquip minim enim culpa occaecat exercitation. Est tempor excepteur
|
||||
aliquip laborum consequat do deserunt laborum esse eiusmod irure
|
||||
proident ipsum esse qui.</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident
|
||||
voluptate minim mollit nostrud aute reprehenderit do. Mollit
|
||||
excepteur eu Lorem ipsum anim commodo sint labore Lorem in
|
||||
exercitation velit incididunt. Occaecat consectetur nisi in occaecat
|
||||
proident minim enim sunt reprehenderit exercitation cupidatat et do
|
||||
officia. Aliquip consequat ad labore labore mollit ut amet. Sit
|
||||
pariatur tempor proident in veniam culpa aliqua excepteur elit magna
|
||||
fugiat eiusmod amet officia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end live preview -->
|
||||
|
||||
<div class="d-none code-view">
|
||||
<pre><code class="language-markup"><div class="row">
|
||||
<div class="col-xxl-3">
|
||||
<nav id="navbar-examplenested" class="navbar navbar-dark bg-light flex-column">
|
||||
<a class="navbar-brand mb-2" href="#">
|
||||
<img src="..." alt="...">
|
||||
</a>
|
||||
<nav class="nav nav-pills flex-column p-3 w-100">
|
||||
<a class="nav-link" href="#item-1"><i class="ri-dashboard-2-line align-middle me-2 fs-16"></i> <span>Dashboards</span></a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1-1"><i class="ri-subtract-fill align-middle me-2 fs-15"></i> <span>Ecommerce</span></a>
|
||||
<a class="nav-link" href="#item-1-2"><i class="ri-subtract-fill align-middle me-2 fs-15"></i> <span>Analytics</span></a>
|
||||
</nav>
|
||||
<a class="nav-link active" href="#item-2"><i class="ri-pencil-ruler-2-line align-middle me-2 fs-16"></i> <span>Base UI</span></a>
|
||||
<a class="nav-link" href="#item-3"><i class="ri-apps-2-line align-middle me-2 fs-16"></i> <span>Apps</span></a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-3-1"><i class="ri-subtract-fill align-middle me-2 fs-15"></i> <span>Chat</span></a>
|
||||
<a class="nav-link" href="#item-3-2"><i class="ri-subtract-fill align-middle me-2 fs-15"></i> <span>Email</span></a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xxl-9">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-examplenested" data-bs-offset="0" class="scrollspy-example-2">
|
||||
<div class="text-muted">
|
||||
<h5 id="item-1">Item 1</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="item-2">Item 2</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="item-3">Item 3</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row --></code></pre>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Scrollspy with list-group</h4>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="form-check form-switch form-switch-right form-switch-md">
|
||||
<label for="listgroupscrollspy-showcode" class="form-label text-muted">Show Code</label>
|
||||
<input class="form-check-input code-switcher" type="checkbox"
|
||||
id="listgroupscrollspy-showcode">
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>data-bs-spy="scroll"</code> attribute. Scrollspy also works with
|
||||
the list-group. Scroll the area next to the list group and watch the active class change.
|
||||
</p>
|
||||
<div class="live-preview">
|
||||
<div class="row gy-4">
|
||||
<div class="col-xxl-3">
|
||||
<div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action active"
|
||||
href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-9">
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0"
|
||||
class="scrollspy-example mt-0">
|
||||
<div class="text-muted">
|
||||
<h5 id="list-item-1">Item 1</h5>
|
||||
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat
|
||||
ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco
|
||||
cillum consectetur ut et aute consectetur labore. Fugiat laborum
|
||||
incididunt tempor eu consequat enim dolore proident. Qui laborum do non
|
||||
excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia
|
||||
quis et incididunt voluptate non anim reprehenderit adipisicing dolore
|
||||
ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non
|
||||
fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod
|
||||
cupidatat elit dolore.</p>
|
||||
<h5 id="list-item-2">Item 2</h5>
|
||||
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
|
||||
tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
|
||||
laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit
|
||||
veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse
|
||||
irure. Laborum nisi sit est tempor laborum mollit labore officia laborum
|
||||
excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex
|
||||
est consectetur ipsum commodo tempor sunt in proident.</p>
|
||||
<h5 id="list-item-3">Item 3</h5>
|
||||
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa
|
||||
duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur
|
||||
aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex
|
||||
pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco
|
||||
excepteur.</p>
|
||||
<h5 id="list-item-4">Item 4</h5>
|
||||
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa
|
||||
duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur
|
||||
aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex
|
||||
pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco
|
||||
excepteur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end live preview -->
|
||||
|
||||
<div class="d-none code-view">
|
||||
<pre><code class="language-markup"><div class="row">
|
||||
<div class="col-xxl-3">
|
||||
<div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action active" href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-9">
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example mt-0">
|
||||
<div class="text-muted">
|
||||
<h5 id="list-item-1">Item 1</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="list-item-2">Item 2</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="list-item-3">Item 3</h5>
|
||||
<p>...</p>
|
||||
|
||||
<h5 id="list-item-4">Item 4</h5>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- prismjs plugin -->
|
||||
<script src="/assets/libs/prismjs/prism.js"></script>
|
||||
|
||||
<!-- rater-js plugin -->
|
||||
<script src="/assets/libs/rater-js/index.js"></script>
|
||||
|
||||
<!-- swiper.init js -->
|
||||
<script src="/assets/js/pages/rating.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,376 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Sweet Alerts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Sweet Alerts','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Examples</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Here are the various types of beautiful, responsive, customizable, and
|
||||
accessible sweet alerts.</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-nowrap align-middle justify-content-center mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width: 50%;">
|
||||
Sweet Alert Type
|
||||
</th>
|
||||
<th scope="col" class="text-center">
|
||||
Sweet Alert Examples
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
A Basic Message
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-basic">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
A Title with a Text Under
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-title">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
A success message!
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-success">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
A modal with a title, an error icon, a text, and a footer
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-error">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
A modal window with a long content inside
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm"
|
||||
id="sa-longcontent">Click me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
A warning message, with a function attached to the "Confirm"-button...
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-warning">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
By passing a parameter, you can execute something else for "Cancel".
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-params">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
A message with custom Image Header
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-image">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
A message with auto close timer
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-close">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Custom HTML description and buttons
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm"
|
||||
id="custom-html-alert">Click me</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
A dialog with three buttons
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm"
|
||||
id="sa-dialog-three-btn">Click me</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
A custom positioned dialog
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="sa-position">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
A message with custom width, padding and background
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm"
|
||||
id="custom-padding-width-alert">Click me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Ajax request example
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="ajax-alert">Click
|
||||
me</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
<!-- end table responsive -->
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row mt-2">
|
||||
<div class="col-lg-12">
|
||||
|
||||
<div class="justify-content-between d-flex align-items-center mb-3">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Custom Sweetalert Example</h5>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="card text-center border">
|
||||
<div class="card-body p-4 pb-0">
|
||||
|
||||
<h5 class="mb-4">Success Message</h5>
|
||||
<p class="text-muted">Here is an example of a sweet alert with a success message.</p>
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary" id="custom-sa-success">Click
|
||||
me</button>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-2">
|
||||
<div class="col-lg-10">
|
||||
<div>
|
||||
<img src="/assets/images/sweetalert2/success-message.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="card text-center border">
|
||||
<div class="card-body p-4 pb-0">
|
||||
<h5 class="mb-4">Error Message</h5>
|
||||
<p class="text-muted">Here is an example of a sweet alert with a error message.</p>
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary" id="custom-sa-error">Click me</button>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-2">
|
||||
<div class="col-lg-10">
|
||||
<div>
|
||||
<img src="/assets/images/sweetalert2/error-message.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="card text-center border">
|
||||
<div class="card-body p-4 pb-0">
|
||||
<h5 class="mb-4">Warning Message</h5>
|
||||
<p class="text-muted">Here is an example of a sweet alert with a warning message.</p>
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary" id="custom-sa-warning">Click
|
||||
me</button>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-2">
|
||||
<div class="col-lg-10">
|
||||
<div>
|
||||
<img src="/assets/images/sweetalert2/warning-message.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="card text-center border">
|
||||
<div class="card-body p-4 pb-0">
|
||||
<h5 class="mb-4">Join Our Community</h5>
|
||||
<p class="text-muted">Here is an example of a sweet alert with a community registration
|
||||
field.</p>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary" id="custom-sa-community">Click
|
||||
me</button>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-2">
|
||||
<div class="col-lg-10">
|
||||
<div>
|
||||
<img src="/assets/images/sweetalert2/join-community.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="card text-center border">
|
||||
<div class="card-body p-4 pb-0">
|
||||
<h5 class="mb-4">Email Verification</h5>
|
||||
<p class="text-muted">Here is an example of a sweet alert with a email verification
|
||||
field.</p>
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary" id="custom-sa-email-verify">Click
|
||||
me</button>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-2">
|
||||
<div class="col-lg-10">
|
||||
<div>
|
||||
<img src="/assets/images/sweetalert2/email-verify.png" alt="Mac Image"
|
||||
class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="card text-center border">
|
||||
<div class="card-body p-4 pb-0">
|
||||
<h5 class="mb-4">Notification Message</h5>
|
||||
<p class="text-muted">Here is an example of a sweet alert with a custom notification
|
||||
message.</p>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary" id="custom-sa-notification">Click
|
||||
me</button>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-2">
|
||||
<div class="col-lg-10">
|
||||
<div>
|
||||
<img src="/assets/images/sweetalert2/notification-message.png"
|
||||
alt="Mac Image" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
|
||||
<!-- Sweet alert init js-->
|
||||
<script src="/assets/js/pages/sweetalerts.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,617 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Swiper Slider')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!--Swiper slider css-->
|
||||
<link href="/assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Swiper Slider','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Default Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>default-swiper</code> class to set a default swiper.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper default-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-1.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-2.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Navigation & Pagination Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>navigation-swiper</code> class to set a swiper with navigation
|
||||
and pagination.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper navigation-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-6.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Pagination Dynamic Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>pagination-dynamic-swiper</code> class to set a dynamic swiper
|
||||
with pagination.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper pagination-dynamic-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-7.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-8.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-9.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination dynamic-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Pagination Fraction Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>pagination-fraction-swiper</code> class to set a fraction swiper
|
||||
with pagination.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper pagination-fraction-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-10.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-11.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-12.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Pagination Custom Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>pagination-custom-swiper</code> class to set a swiper with
|
||||
custom pagination.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper pagination-custom-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-2.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination pagination-custom"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Pagination Progress Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>pagination-progress-swiper</code> class to set a swiper with
|
||||
progress pagination.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper pagination-progress-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-6.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-7.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Scrollbar Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>pagination-scrollbar-swiper</code> class to set a swiper with
|
||||
scrollbar pagination.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper pagination-scrollbar-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-8.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-9.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-10.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-scrollbar"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Vertical Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>vertical-swiper</code> class to set a vertical swiper.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper vertical-swiper rounded" style="height: 324px;">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-11.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-12.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-1.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Mousewheel Control Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>mousewheel-control-swiper</code> class to set a swiper with
|
||||
mousewheel scroll.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper mousewheel-control-swiper rounded" style="height: 324px;">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Effect Fade Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>effect-fade-swiper</code> class to set a swiper with fade
|
||||
effect.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper effect-fade-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-6.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-7.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-8.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Effect Creative Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>effect-creative-swiper</code> class to set a swiper with
|
||||
creative custom effect.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper effect-creative-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-9.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-10.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-11.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Effect Flip Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>effect-flip-swiper</code> class to set a swiper with flip
|
||||
effect.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper effect-flip-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-12.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-1.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-2.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Effect Coverflow Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>effect-coverflow-swiper</code> class to set a swiper with
|
||||
coverflow effect.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper effect-coverflow-swiper rounded pb-5">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-6.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-7.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-8.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/small/img-9.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination swiper-pagination-dark"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Responsive Breakpoints Swiper</h4>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use <code>responsive-swiper</code> class to set a responsive swiper.</p>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper responsive-swiper rounded gallery-light pb-4">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="gallery-box card">
|
||||
<div class="gallery-container">
|
||||
<a class="image-popup" href="assets/images/small/img-1.jpg" title="">
|
||||
<img class="gallery-img img-fluid mx-auto"
|
||||
src="assets/images/small/img-1.jpg" alt="" />
|
||||
<div class="gallery-overlay">
|
||||
<h5 class="overlay-caption">Glasses and laptop from above</h5>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="d-flex align-items-center mt-1">
|
||||
<div class="flex-grow-1 text-muted">by <a href=""
|
||||
class="text-body text-truncate">Ron Mackie</a></div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex gap-3">
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-thumb-up-fill text-muted align-bottom me-1"></i>
|
||||
2.2K
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-question-answer-fill text-muted align-bottom me-1"></i>
|
||||
1.3K
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="gallery-box card">
|
||||
<div class="gallery-container">
|
||||
<a class="image-popup" href="assets/images/small/img-2.jpg" title="">
|
||||
<img class="gallery-img img-fluid mx-auto"
|
||||
src="assets/images/small/img-2.jpg" alt="" />
|
||||
<div class="gallery-overlay">
|
||||
<h5 class="overlay-caption">Working at a coffee shop</h5>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="d-flex align-items-center mt-1">
|
||||
<div class="flex-grow-1 text-muted">by <a href=""
|
||||
class="text-body text-truncate">Nancy Martino</a></div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex gap-3">
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-thumb-up-fill text-muted align-bottom me-1"></i>
|
||||
3.2K
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-question-answer-fill text-muted align-bottom me-1"></i>
|
||||
1.1K
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="gallery-box card mb-0">
|
||||
<div class="gallery-container">
|
||||
<a class="image-popup" href="assets/images/small/img-10.jpg" title="">
|
||||
<img class="gallery-img img-fluid mx-auto"
|
||||
src="assets/images/small/img-10.jpg" alt="">
|
||||
<div class="gallery-overlay">
|
||||
<h5 class="overlay-caption">Fun day at the Hill Station</h5>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="d-flex align-items-center mt-1">
|
||||
<div class="flex-grow-1 text-muted">by <a href=""
|
||||
class="text-body text-truncate">Henry Baird</a></div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex gap-3">
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-thumb-up-fill text-muted align-bottom me-1"></i>
|
||||
632
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-question-answer-fill text-muted align-bottom me-1"></i>
|
||||
95
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="gallery-box card">
|
||||
<div class="gallery-container">
|
||||
<a class="image-popup" href="assets/images/small/img-4.jpg" title="">
|
||||
<img class="gallery-img img-fluid mx-auto"
|
||||
src="assets/images/small/img-4.jpg" alt="" />
|
||||
<div class="gallery-overlay">
|
||||
<h5 class="overlay-caption">Drawing a sketch</h5>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="d-flex align-items-center mt-1">
|
||||
<div class="flex-grow-1 text-muted">by <a href=""
|
||||
class="text-body text-truncate">Jason McQuaid</a></div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex gap-3">
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-thumb-up-fill text-muted align-bottom me-1"></i>
|
||||
825
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-question-answer-fill text-muted align-bottom me-1"></i>
|
||||
101
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="gallery-box card">
|
||||
<div class="gallery-container">
|
||||
<a class="image-popup" href="assets/images/small/img-6.jpg" title="">
|
||||
<img class="gallery-img img-fluid mx-auto"
|
||||
src="assets/images/small/img-6.jpg" alt="" />
|
||||
<div class="gallery-overlay">
|
||||
<h5 class="overlay-caption">Project discussion with team</h5>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="d-flex align-items-center mt-1">
|
||||
<div class="flex-grow-1 text-muted">by <a href=""
|
||||
class="text-body text-truncate">Erica Kernan</a></div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex gap-3">
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-thumb-up-fill text-muted align-bottom me-1"></i>
|
||||
3.4K
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
|
||||
<i
|
||||
class="ri-question-answer-fill text-muted align-bottom me-1"></i>
|
||||
1.3k
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination swiper-pagination-dark"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- prismjs plugin -->
|
||||
<script src="assets/libs/prismjs/prism.js"></script>
|
||||
|
||||
<!--Swiper slider js-->
|
||||
<script src="assets/libs/swiper/swiper-bundle.min.js"></script>
|
||||
|
||||
<!-- swiper.init js -->
|
||||
<script src="assets/js/pages/swiper.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,135 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Tour')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- shepherd.js css -->
|
||||
<link rel="stylesheet" href="/assets/libs/shepherd.js/css/shepherd.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Tour','Advance UI')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Shepherdjs</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<p class="text-muted mb-4">Use when you want to help users along getting accustomed to your user
|
||||
interface or Use when you want to notify your users of new or unfamiliar features.</p>
|
||||
|
||||
<div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-5">
|
||||
<div class="text-center mt-4 mb-5">
|
||||
<div class="py-3 px-2 d-inline-block" id="logo-tour">
|
||||
<img src="assets/images/logo-dark.png" class="card-logo card-logo-dark"
|
||||
alt="logo" height="17">
|
||||
<img src="assets/images/logo-light.png" class="card-logo card-logo-light"
|
||||
alt="logo" height="17">
|
||||
</div>
|
||||
<h5 class="fs-16">Responsive Admin Dashboard Template</h5>
|
||||
<p class="text-muted">Vestibulum auctor tincidunt semper. Phasellus ut vulputate
|
||||
lacus. Suspendisse ultricies mi eros, sit amet tempor nulla varius sed
|
||||
dapibus in tellus.</p>
|
||||
<div class="hstack gap-2 justify-content-center">
|
||||
<button type="button" class="btn btn-primary btn-sm">View more</button>
|
||||
<button type="button" class="btn btn-success btn-sm">Email us</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xxl-9 col-lg-10 col-sm-8">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card border shadow-none">
|
||||
<div class="card-body text-center">
|
||||
<div class="avatar-md mx-auto mb-4" id="register-tour">
|
||||
<div
|
||||
class="avatar-title bg-light rounded-circle text-primary fs-24">
|
||||
<i class="ri-edit-box-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5>Free register</h5>
|
||||
<p class="text-muted mb-0">Get your Free Velzon account now.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card border shadow-none">
|
||||
<div class="card-body text-center">
|
||||
<div class="avatar-md mx-auto mb-4" id="login-tour">
|
||||
<div
|
||||
class="avatar-title bg-light rounded-circle text-primary fs-24">
|
||||
<i class="ri-user-shared-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5>Log in account</h5>
|
||||
<p class="text-muted mb-0">Sign in to continue to Velzon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card border shadow-none">
|
||||
<div class="card-body text-center">
|
||||
<div class="avatar-md mx-auto mb-4" id="getproduct-tour">
|
||||
<div
|
||||
class="avatar-title bg-light rounded-circle text-primary fs-24">
|
||||
<i class="ri-file-download-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5>Get Product</h5>
|
||||
<p class="text-muted mb-0">Sign in to continue to Velzon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="text-center my-4">
|
||||
<button class="btn btn-success" id="thankyou-tour">Thank you !</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- shepherd js -->
|
||||
<script src="/assets/libs/shepherd.js/js/shepherd.min.js"></script>
|
||||
|
||||
<!-- tour init -->
|
||||
<script src="/assets/js/pages/tour.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,254 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('API Key')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('API Key','Apps')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3">Developer Plan</h5>
|
||||
<div class="progress animated-progress custom-progress mb-1">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 38%" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<p class="text-muted mb-2">You used 215 of 2000 of your API</p>
|
||||
<div class="text-end">
|
||||
<button type="button" class="btn btn-secondary btn-sm create-btn" data-bs-toggle="modal" data-bs-target="#api-key-modal">Create API Key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-animate card-height-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Successful conversions</p>
|
||||
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="50"></span></h2>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"><i class="ri-arrow-up-line align-middle"></i> 8.24 % </span> 7 last week</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-success rounded-circle fs-2">
|
||||
<i data-feather="check-circle" class="text-success"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-animate card-height-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Failed conversions</p>
|
||||
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="8"></span></h2>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-danger mb-0"><i class="ri-arrow-down-line align-middle"></i> 25.87 % </span> 7 last week</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-danger rounded-circle fs-2">
|
||||
<i data-feather="alert-octagon" class="text-danger"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="apiKeyList">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
<h5 class="card-title flex-grow-1 mb-0">API Keys</h5>
|
||||
<div class="d-flex gap-1 flex-wrap">
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
<button type="button" class="btn btn-primary create-btn" data-bs-toggle="modal" data-bs-target="#api-key-modal"><i class="ri-add-line align-bottom me-1"></i>
|
||||
Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="table-responsive table-card mb-3">
|
||||
<table class="table align-middle table-nowrap mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" style="width: 50px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort d-none" data-sort="id" scope="col">Id</th>
|
||||
<th class="sort" data-sort="name" scope="col">Name</th>
|
||||
<th class="sort" data-sort="createBy" scope="col">Created By</th>
|
||||
<th class="sort" data-sort="apikey" scope="col">API Key</th>
|
||||
<th class="sort" data-sort="status" scope="col">Status</th>
|
||||
<th class="sort" data-sort="create_date" scope="col">Create Date</th>
|
||||
<th class="sort" data-sort="expiry_date" scope="col">Expiry Date</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="chk_child" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td class="name">Streamlab</td>
|
||||
<td class="createBy">Nicholas Ball</td>
|
||||
<td class="apikey">
|
||||
<input type="text" class="form-control apikey-value" readonly value="b5815DE8A7224438932eb296Z5">
|
||||
</td>
|
||||
<td class="status"><span class="badge badge-soft-danger">Disable</span></td>
|
||||
<td class="create_date">24 Sep, 2022</td>
|
||||
<td class="expiry_date">24 Jan, 2023</td>
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item edit-item-btn" href="#api-key-modal" data-bs-toggle="modal">Rename</a></li>
|
||||
<li><a class="dropdown-item regenerate-api-btn" href="#api-key-modal" data-bs-toggle="modal">Regenerate
|
||||
Key</a></li>
|
||||
<li><a class="dropdown-item disable-btn" href="javascript:void(0);">Disable</a></li>
|
||||
<li><a class="dropdown-item remove-item-btn" data-bs-toggle="modal" href="#deleteApiKeyModal">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ API Keys We did not
|
||||
find any API for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="api-key-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Create API Key</h5>
|
||||
<button type="button" class="btn-close" id="close-modal" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form autocomplete="off">
|
||||
<div id="api-key-error-msg" class="alert alert-danger py-2 d-none"></div>
|
||||
<input type="hidden" id="apikeyId">
|
||||
<div class="mb-3">
|
||||
<label for="api-key-name" class="form-label">API Key Name <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="api-key-name" placeholder="Enter api key name">
|
||||
</div>
|
||||
<div class="mb-3" id="apikey-element" style="display: none;">
|
||||
<label for="api-key" class="form-label">API Key</label>
|
||||
<input type="text" class="form-control" id="api-key" disabled value="b5815DE8A7224438932eb296Z5">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="createApi-btn">Create API</button>
|
||||
<button type="button" class="btn btn-primary" id="add-btn">Add</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-btn">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- modal content -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end modal -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade zoomIn" id="deleteApiKeyModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="deleteRecord-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you Sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you Sure You want to Remove this API Key ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger " id="delete-record">Yes, Delete
|
||||
It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal -->
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/api-key.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,261 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Calendar')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- fullcalendar css -->
|
||||
<link href="/assets/libs/fullcalendar/main.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
|
||||
<div th:replace="partials/page-title :: page-title('Calendar','Apps')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-xl-3">
|
||||
<div class="card card-h-100">
|
||||
<div class="card-body">
|
||||
<button class="btn btn-primary w-100" id="btn-new-event"><i class="mdi mdi-plus"></i>
|
||||
Create New Event</button>
|
||||
|
||||
<div id="external-events">
|
||||
<br>
|
||||
<p class="text-muted">Drag and drop your event or click in the calendar</p>
|
||||
<div class="external-event fc-event bg-soft-success text-success"
|
||||
data-class="bg-soft-success">
|
||||
<i class="mdi mdi-checkbox-blank-circle font-size-11 me-2"></i>New Event
|
||||
Planning
|
||||
</div>
|
||||
<div class="external-event fc-event bg-soft-info text-info"
|
||||
data-class="bg-soft-info">
|
||||
<i class="mdi mdi-checkbox-blank-circle font-size-11 me-2"></i>Meeting
|
||||
</div>
|
||||
<div class="external-event fc-event bg-soft-warning text-warning"
|
||||
data-class="bg-soft-warning">
|
||||
<i class="mdi mdi-checkbox-blank-circle font-size-11 me-2"></i>Generating
|
||||
Reports
|
||||
</div>
|
||||
<div class="external-event fc-event bg-soft-danger text-danger"
|
||||
data-class="bg-soft-danger">
|
||||
<i class="mdi mdi-checkbox-blank-circle font-size-11 me-2"></i>Create New theme
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-1">Upcoming Events</h5>
|
||||
<p class="text-muted">Don't miss scheduled events</p>
|
||||
<div class="pe-2 me-n1 mb-3" data-simplebar style="height: 400px">
|
||||
<div id="upcoming-event-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body bg-soft-info">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<i data-feather="calendar" class="text-info icon-dual-info"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="fs-15">Welcome to your Calendar!</h6>
|
||||
<p class="text-muted mb-0">Event that applications book will appear here. Click
|
||||
on an event to see the details and manage applicants event.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-9">
|
||||
<div class="card card-h-100">
|
||||
<div class="card-body">
|
||||
<div id="calendar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div style='clear:both'></div>
|
||||
|
||||
<!-- Add New Event MODAL -->
|
||||
<div class="modal fade" id="event-modal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header p-3 bg-soft-info">
|
||||
<h5 class="modal-title" id="modal-title">Event</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-hidden="true"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4">
|
||||
<form class="needs-validation" name="event-form" id="form-event" novalidate>
|
||||
<div class="text-end">
|
||||
<a href="#" class="btn btn-sm btn-soft-primary" id="edit-event-btn"
|
||||
data-id="edit-event" onclick="editEvent(this)" role="button">Edit</a>
|
||||
</div>
|
||||
<div class="event-details">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="flex-grow-1 d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<i class="ri-calendar-event-line text-muted fs-16"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="d-block fw-semibold mb-0" id="event-start-date-tag"></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<i class="ri-time-line text-muted fs-16"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="d-block fw-semibold mb-0"><span
|
||||
id="event-timepicker1-tag"></span> - <span
|
||||
id="event-timepicker2-tag"></span></h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<i class="ri-map-pin-line text-muted fs-16"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="d-block fw-semibold mb-0"> <span
|
||||
id="event-location-tag"></span></h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<i class="ri-discuss-line text-muted fs-16"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="d-block text-muted mb-0" id="event-description-tag"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row event-form">
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Type</label>
|
||||
<select class="form-select d-none" name="category" id="event-category"
|
||||
required>
|
||||
<option value="bg-soft-danger">Danger</option>
|
||||
<option value="bg-soft-success">Success</option>
|
||||
<option value="bg-soft-primary">Primary</option>
|
||||
<option value="bg-soft-info">Info</option>
|
||||
<option value="bg-soft-dark">Dark</option>
|
||||
<option value="bg-soft-warning">Warning</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">Please select a valid event category</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Event Name</label>
|
||||
<input class="form-control d-none" placeholder="Enter event name"
|
||||
type="text" name="title" id="event-title" required value="" />
|
||||
<div class="invalid-feedback">Please provide a valid event name</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label>Event Date</label>
|
||||
<div class="input-group d-none">
|
||||
<input type="text" id="event-start-date"
|
||||
class="form-control flatpickr flatpickr-input"
|
||||
placeholder="Select date" readonly required>
|
||||
<span class="input-group-text"><i
|
||||
class="ri-calendar-event-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12" id="event-time">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Start Time</label>
|
||||
<div class="input-group d-none">
|
||||
<input id="timepicker1" type="text"
|
||||
class="form-control flatpickr flatpickr-input"
|
||||
placeholder="Select start time" readonly>
|
||||
<span class="input-group-text"><i
|
||||
class="ri-time-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">End Time</label>
|
||||
<div class="input-group d-none">
|
||||
<input id="timepicker2" type="text"
|
||||
class="form-control flatpickr flatpickr-input"
|
||||
placeholder="Select end time" readonly>
|
||||
<span class="input-group-text"><i
|
||||
class="ri-time-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="event-location">Location</label>
|
||||
<div>
|
||||
<input type="text" class="form-control d-none" name="event-location"
|
||||
id="event-location" placeholder="Event location">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<input type="hidden" id="eventid" name="eventid" value="" />
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-control d-none" id="event-description"
|
||||
placeholder="Enter a description" rows="3"
|
||||
spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-soft-danger" id="btn-delete-event"><i
|
||||
class="ri-close-line align-bottom"></i> Delete</button>
|
||||
<button type="submit" class="btn btn-success" id="btn-save-event">Add
|
||||
Event</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div> <!-- end modal-content-->
|
||||
</div> <!-- end modal dialog-->
|
||||
</div> <!-- end modal-->
|
||||
<!-- end modal-->
|
||||
</div>
|
||||
</div> <!-- end row-->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- calendar min js -->
|
||||
<script src="/assets/libs/fullcalendar/main.min.js"></script>
|
||||
|
||||
<!-- Calendar init -->
|
||||
<script src="/assets/js/pages/calendar.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,423 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Chat')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
<!-- glightbox css -->
|
||||
<link rel="stylesheet" href="/assets/libs/glightbox/css/glightbox.min.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
|
||||
<div class="chat-wrapper d-lg-flex gap-1 mt-n4 py-1">
|
||||
<div class="chat-leftsidebar">
|
||||
<div class="px-4 pt-4 mb-3">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mb-4">Chats</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom"
|
||||
title="Add Contact">
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-soft-primary btn-sm">
|
||||
<i class="ri-add-line align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control bg-light border-light" placeholder="Search here...">
|
||||
<i class="ri-search-2-line search-icon"></i>
|
||||
</div>
|
||||
</div> <!-- .p-4 -->
|
||||
|
||||
<ul class="nav nav-tabs nav-tabs-custom nav-success nav-justified" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#chats" role="tab">
|
||||
Chats
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#contacts" role="tab">
|
||||
Contacts
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content text-muted">
|
||||
<div class="tab-pane active" id="chats" role="tabpanel">
|
||||
<div class="chat-room-list pt-3" data-simplebar>
|
||||
<div class="d-flex align-items-center px-4 mb-2">
|
||||
<div class="flex-grow-1">
|
||||
<h4 class="mb-0 fs-11 text-muted text-uppercase">Direct Messages</h4>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom"
|
||||
title="New Message">
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-soft-primary btn-sm shadow-none">
|
||||
<i class="ri-add-line align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-message-list">
|
||||
|
||||
<ul class="list-unstyled chat-list chat-user-list" id="userList">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center px-4 mt-4 pt-2 mb-2">
|
||||
<div class="flex-grow-1">
|
||||
<h4 class="mb-0 fs-11 text-muted text-uppercase">Channels</h4>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom"
|
||||
title="Create group">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-soft-success btn-sm">
|
||||
<i class="ri-add-line align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-message-list">
|
||||
|
||||
<ul class="list-unstyled chat-list chat-user-list mb-0" id="channelList">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- End chat-message-list -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="contacts" role="tabpanel">
|
||||
<div class="chat-room-list pt-3" data-simplebar>
|
||||
<div class="sort-contact">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab contact -->
|
||||
</div>
|
||||
<!-- end chat leftsidebar -->
|
||||
<!-- Start User chat -->
|
||||
<div class="user-chat w-100 overflow-hidden">
|
||||
|
||||
<div class="chat-content d-lg-flex">
|
||||
<!-- start chat conversation section -->
|
||||
<div class="w-100 overflow-hidden position-relative">
|
||||
<!-- conversation user -->
|
||||
<div class="position-relative">
|
||||
|
||||
|
||||
<div class="position-relative" id="users-chat">
|
||||
<div class="p-3 user-chat-topbar">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-sm-4 col-8">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 d-block d-lg-none me-3">
|
||||
<a href="javascript: void(0);" class="user-chat-remove fs-18 p-1"><i
|
||||
class="ri-arrow-left-s-line align-bottom"></i></a>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="flex-shrink-0 chat-user-img online user-own-img align-self-center me-3 ms-0">
|
||||
<img src="/assets/images/users/avatar-2.jpg"
|
||||
class="rounded-circle avatar-xs" alt="">
|
||||
<span class="user-status"></span>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate mb-0 fs-16"><a
|
||||
class="text-reset username"
|
||||
data-bs-toggle="offcanvas"
|
||||
href="#userProfileCanvasExample"
|
||||
aria-controls="userProfileCanvasExample">Lisa
|
||||
Parker</a></h5>
|
||||
<p class="text-truncate text-muted fs-14 mb-0 userStatus">
|
||||
<small>Online</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 col-4">
|
||||
<ul class="list-inline user-chat-nav text-end mb-0">
|
||||
<li class="list-inline-item m-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-secondary btn-icon" type="button"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i data-feather="search" class="icon-sm"></i>
|
||||
</button>
|
||||
<div
|
||||
class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
|
||||
<div class="p-2">
|
||||
<div class="search-box">
|
||||
<input type="text"
|
||||
class="form-control bg-light border-light"
|
||||
placeholder="Search here..."
|
||||
onkeyup="searchMessages()" id="searchMessage">
|
||||
<i class="ri-search-2-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item d-none d-lg-inline-block m-0">
|
||||
<button type="button" class="btn btn-ghost-secondary btn-icon"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#userProfileCanvasExample"
|
||||
aria-controls="userProfileCanvasExample">
|
||||
<i data-feather="info" class="icon-sm"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item m-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-secondary btn-icon" type="button"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i data-feather="more-vertical" class="icon-sm"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item d-block d-lg-none user-profile-show"
|
||||
href="#"><i
|
||||
class="ri-user-2-fill align-bottom text-muted me-2"></i>
|
||||
View Profile</a>
|
||||
<a class="dropdown-item" href="#"><i
|
||||
class="ri-inbox-archive-line align-bottom text-muted me-2"></i>
|
||||
Archive</a>
|
||||
<a class="dropdown-item" href="#"><i
|
||||
class="ri-mic-off-line align-bottom text-muted me-2"></i>
|
||||
Muted</a>
|
||||
<a class="dropdown-item" href="#"><i
|
||||
class="ri-delete-bin-5-line align-bottom text-muted me-2"></i>
|
||||
Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end chat user head -->
|
||||
<div class="chat-conversation p-3 p-lg-4 " id="chat-conversation" data-simplebar>
|
||||
<div id="elmLoader">
|
||||
<div class="spinner-border text-primary avatar-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled chat-conversation-list" id="users-conversation">
|
||||
|
||||
</ul>
|
||||
<!-- end chat-conversation-list -->
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible copyclipboard-alert px-4 fade show "
|
||||
id="copyClipBoard" role="alert">
|
||||
Message copied
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="position-relative" id="channel-chat">
|
||||
<div class="p-3 user-chat-topbar">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-sm-4 col-8">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 d-block d-lg-none me-3">
|
||||
<a href="javascript: void(0);" class="user-chat-remove fs-18 p-1"><i
|
||||
class="ri-arrow-left-s-line align-bottom"></i></a>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="flex-shrink-0 chat-user-img online user-own-img align-self-center me-3 ms-0">
|
||||
<img src="/assets/images/users/avatar-2.jpg"
|
||||
class="rounded-circle avatar-xs" alt="">
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate mb-0 fs-16"><a
|
||||
class="text-reset username"
|
||||
data-bs-toggle="offcanvas"
|
||||
href="#userProfileCanvasExample"
|
||||
aria-controls="userProfileCanvasExample">Lisa
|
||||
Parker</a></h5>
|
||||
<p class="text-truncate text-muted fs-14 mb-0 userStatus">
|
||||
<small>24 Members</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 col-4">
|
||||
<ul class="list-inline user-chat-nav text-end mb-0">
|
||||
<li class="list-inline-item m-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-secondary btn-icon" type="button"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i data-feather="search" class="icon-sm"></i>
|
||||
</button>
|
||||
<div
|
||||
class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
|
||||
<div class="p-2">
|
||||
<div class="search-box">
|
||||
<input type="text"
|
||||
class="form-control bg-light border-light"
|
||||
placeholder="Search here..."
|
||||
onkeyup="searchMessages()" id="searchMessage">
|
||||
<i class="ri-search-2-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item d-none d-lg-inline-block m-0">
|
||||
<button type="button" class="btn btn-ghost-secondary btn-icon"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#userProfileCanvasExample"
|
||||
aria-controls="userProfileCanvasExample">
|
||||
<i data-feather="info" class="icon-sm"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item m-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-secondary btn-icon" type="button"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i data-feather="more-vertical" class="icon-sm"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item d-block d-lg-none user-profile-show"
|
||||
href="#"><i
|
||||
class="ri-user-2-fill align-bottom text-muted me-2"></i>
|
||||
View Profile</a>
|
||||
<a class="dropdown-item" href="#"><i
|
||||
class="ri-inbox-archive-line align-bottom text-muted me-2"></i>
|
||||
Archive</a>
|
||||
<a class="dropdown-item" href="#"><i
|
||||
class="ri-mic-off-line align-bottom text-muted me-2"></i>
|
||||
Muted</a>
|
||||
<a class="dropdown-item" href="#"><i
|
||||
class="ri-delete-bin-5-line align-bottom text-muted me-2"></i>
|
||||
Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end chat user head -->
|
||||
<div class="chat-conversation p-3 p-lg-4" id="chat-conversation" data-simplebar>
|
||||
<ul class="list-unstyled chat-conversation-list" id="channel-conversation">
|
||||
</ul>
|
||||
<!-- end chat-conversation-list -->
|
||||
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible copyclipboard-alert px-4 fade show "
|
||||
id="copyClipBoardChannel" role="alert">
|
||||
Message copied
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- end chat-conversation -->
|
||||
|
||||
<div class="chat-input-section p-3 p-lg-4">
|
||||
|
||||
<form id="chatinput-form" enctype="multipart/form-data">
|
||||
<div class="row g-0 align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="chat-input-links me-2">
|
||||
<div class="links-list-item">
|
||||
<button type="button"
|
||||
class="btn btn-link text-decoration-none emoji-btn"
|
||||
id="emoji-btn">
|
||||
<i class="bx bx-smile align-middle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="chat-input-feedback">
|
||||
Please Enter a Message
|
||||
</div>
|
||||
<input type="text" class="form-control chat-input bg-light border-light"
|
||||
id="chat-input" placeholder="Type your message..." autocomplete="off">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="chat-input-links ms-2">
|
||||
<div class="links-list-item">
|
||||
<button type="submit"
|
||||
class="btn btn-success chat-send waves-effect waves-light">
|
||||
<i class="ri-send-plane-2-fill align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="replyCard">
|
||||
<div class="card mb-0">
|
||||
<div class="card-body py-3">
|
||||
<div class="replymessage-block mb-0 d-flex align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="conversation-name"></h5>
|
||||
<p class="mb-0"></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button" id="close_toggle"
|
||||
class="btn btn-sm btn-link mt-n2 me-n3 fs-18">
|
||||
<i class="bx bx-x align-middle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- glightbox js -->
|
||||
<script src="/assets/libs/glightbox/js/glightbox.min.js"></script>
|
||||
|
||||
<!-- fgEmojiPicker js -->
|
||||
<script src="/assets/libs/fg-emoji-picker/fgEmojiPicker.js"></script>
|
||||
|
||||
<!-- chat init js -->
|
||||
<script src="/assets/js/pages/chat.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,403 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Companies')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Companies','CRM')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items-center flex-wrap gap-2">
|
||||
<div class="flex-grow-1">
|
||||
<button class="btn btn-secondary add-btn" data-bs-toggle="modal" data-bs-target="#showModal"><i class="ri-add-fill me-1 align-bottom"></i> Add
|
||||
Company</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="hstack text-nowrap gap-2">
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addmembers"><i class="ri-filter-2-line me-1 align-bottom"></i>
|
||||
Filters</button>
|
||||
<button class="btn btn-soft-success">Import</button>
|
||||
<button type="button" id="dropdownMenuLink1" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-soft-info"><i class="ri-more-2-fill"></i></button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
|
||||
<li><a class="dropdown-item" href="#">All</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Week</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Month</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Year</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-9">
|
||||
<div class="card" id="companyList">
|
||||
<div class="card-header">
|
||||
<div class="row g-2">
|
||||
<div class="col-md-3">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for company...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto ms-auto">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="text-muted">Sort by: </span>
|
||||
<select class="form-control mb-0" data-choices data-choices-search-false id="choices-single-default">
|
||||
<option value="Owner">Owner</option>
|
||||
<option value="Company">Company</option>
|
||||
<option value="location">Location</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="table-responsive table-card mb-3">
|
||||
<table class="table align-middle table-nowrap mb-0" id="customerTable">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" style="width: 50px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort" data-sort="name" scope="col">Company Name</th>
|
||||
<th class="sort" data-sort="owner" scope="col">Owner</th>
|
||||
<th class="sort" data-sort="industry_type" scope="col">Industry Type</th>
|
||||
<th class="sort" data-sort="star_value" scope="col">Rating</th>
|
||||
<th class="sort" data-sort="location" scope="col">Location</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="chk_child" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="assets/images/brands/dribbble.png" alt="" class="avatar-xxs rounded-circle image_src object-cover">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2 name">Nesta Technologies
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="owner">Tonya Noble</td>
|
||||
<td class="industry_type">Computer Industry</td>
|
||||
<td><span class="star_value">4.5</span> <i class="ri-star-fill text-warning align-bottom"></i></td>
|
||||
<td class="location">Los Angeles, USA</td>
|
||||
<td>
|
||||
<ul class="list-inline hstack gap-2 mb-0">
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Call">
|
||||
<a href="javascript:void(0);" class="text-muted d-inline-block">
|
||||
<i class="ri-phone-line fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Message">
|
||||
<a href="javascript:void(0);" class="text-muted d-inline-block">
|
||||
<i class="ri-question-answer-line fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
|
||||
<a href="javascript:void(0);" class="view-item-btn"><i class="ri-eye-fill align-bottom text-muted"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
|
||||
<a class="edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-pencil-fill align-bottom text-muted"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Delete">
|
||||
<a class="remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal">
|
||||
<i class="ri-delete-bin-fill align-bottom text-muted"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ companies We did not
|
||||
find any companies for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header bg-soft-info p-3">
|
||||
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<form class="tablelist-form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="id-field" />
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="position-absolute bottom-0 end-0">
|
||||
<label for="company-logo-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
|
||||
<div class="avatar-xs cursor-pointer">
|
||||
<div class="avatar-title bg-light border rounded-circle text-muted">
|
||||
<i class="ri-image-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input class="form-control d-none" value="" id="company-logo-input" type="file" accept="image/png, image/gif, image/jpeg">
|
||||
</div>
|
||||
<div class="avatar-lg p-1">
|
||||
<div class="avatar-title bg-light rounded-circle">
|
||||
<img src="assets/images/users/multi-user.jpg" id="companylogo-img" class="avatar-md rounded-circle object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fs-13 mt-3">Company Logo</h5>
|
||||
</div>
|
||||
<div>
|
||||
<label for="companyname-field" class="form-label">Name</label>
|
||||
<input type="text" id="companyname-field" class="form-control" placeholder="Enter company name" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="owner-field" class="form-label">Owner Name</label>
|
||||
<input type="text" id="owner-field" class="form-control" placeholder="Enter owner name" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="industry_type-field" class="form-label">Industry
|
||||
Type</label>
|
||||
<select class="form-select" id="industry_type-field">
|
||||
<option value="">Select industry type</option>
|
||||
<option value="Computer Industry">Computer Industry</option>
|
||||
<option value="Chemical Industries">Chemical Industries
|
||||
</option>
|
||||
<option value="Health Services">Health Services</option>
|
||||
<option value="Telecommunications Services">
|
||||
Telecommunications Services</option>
|
||||
<option value="Textiles: Clothing, Footwear">Textiles:
|
||||
Clothing, Footwear</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="star_value-field" class="form-label">Rating</label>
|
||||
<input type="text" id="star_value-field" class="form-control" placeholder="Enter rating" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="location-field" class="form-label">Location</label>
|
||||
<input type="text" id="location-field" class="form-control" placeholder="Enter location" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="employee-field" class="form-label">Employee</label>
|
||||
<input type="text" id="employee-field" class="form-control" placeholder="Enter employee" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="website-field" class="form-label">Website</label>
|
||||
<input type="text" id="website-field" class="form-control" placeholder="Enter website" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="contact_email-field" class="form-label">Contact
|
||||
Email</label>
|
||||
<input type="text" id="contact_email-field" class="form-control" placeholder="Enter contact email" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="since-field" class="form-label">Since</label>
|
||||
<input type="text" id="since-field" class="form-control" placeholder="Enter since" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-success" id="add-btn">Add
|
||||
Company</button>
|
||||
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end add modal-->
|
||||
|
||||
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-labelledby="deleteRecordLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-5 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
|
||||
</lord-icon>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="fs-semibold">You are about to delete a company ?</h4>
|
||||
<p class="text-muted fs-14 mb-4 pt-1">Deleting your company will remove all
|
||||
of your information from our database.</p>
|
||||
<div class="hstack gap-2 justify-content-center remove">
|
||||
<button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal">
|
||||
<i class="ri-close-line me-1 align-middle"></i> Close
|
||||
</button>
|
||||
<button class="btn btn-danger" id="delete-record">Yes, Delete
|
||||
It!!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end delete modal -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3">
|
||||
<div class="card" id="company-view-detail">
|
||||
<div class="card-body text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="avatar-md">
|
||||
<div class="avatar-title bg-light rounded-circle">
|
||||
<img src="assets/images/brands/mail_chimp.png" alt="" class="avatar-sm rounded-circle object-cover">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="mt-3 mb-1">Syntyce Solution</h5>
|
||||
<p class="text-muted">Michael Morris</p>
|
||||
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-success text-success fs-15 rounded">
|
||||
<i class="ri-global-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-danger text-danger fs-15 rounded">
|
||||
<i class="ri-mail-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-warning text-warning fs-15 rounded">
|
||||
<i class="ri-question-answer-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-3">Information</h6>
|
||||
<p class="text-muted mb-4">A company incurs fixed and variable costs such as the purchase of raw
|
||||
materials, salaries and overhead, as explained by AccountingTools, Inc. Business owners have
|
||||
the discretion to determine the actions.</p>
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Industry Type</td>
|
||||
<td>Chemical Industries</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Location</td>
|
||||
<td>Damascus, Syria</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Employee</td>
|
||||
<td>10-50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Rating</td>
|
||||
<td>4.0 <i class="ri-star-fill text-warning align-bottom"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Website</td>
|
||||
<td>
|
||||
<a href="javascript:void(0);" class="link-primary text-decoration-underline">www.syntycesolution.com</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Contact Email</td>
|
||||
<td>info@syntycesolution.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Since</td>
|
||||
<td>1995</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/crm-companies.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,408 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Contacts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Contacts','CRM')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items-center flex-wrap gap-2">
|
||||
<div class="flex-grow-1">
|
||||
<button class="btn btn-primary add-btn" data-bs-toggle="modal" data-bs-target="#showModal"><i class="ri-add-fill me-1 align-bottom"></i> Add
|
||||
Contacts</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="hstack text-nowrap gap-2">
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
<button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#addmembers"><i class="ri-filter-2-line me-1 align-bottom"></i>
|
||||
Filters</button>
|
||||
<button class="btn btn-soft-success">Import</button>
|
||||
<button type="button" id="dropdownMenuLink1" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-soft-info"><i class="ri-more-2-fill"></i></button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
|
||||
<li><a class="dropdown-item" href="#">All</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Week</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Month</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Year</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-9">
|
||||
<div class="card" id="contactList">
|
||||
<div class="card-header">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for contact...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto ms-auto">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="text-muted">Sort by: </span>
|
||||
<select class="form-control mb-0" data-choices data-choices-search-false id="choices-single-default">
|
||||
<option value="Name">Name</option>
|
||||
<option value="Company">Company</option>
|
||||
<option value="Lead">Lead</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="table-responsive table-card mb-3">
|
||||
<table class="table align-middle table-nowrap mb-0" id="customerTable">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" style="width: 50px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort" data-sort="name" scope="col">Name</th>
|
||||
<th class="sort" data-sort="company_name" scope="col">Company</th>
|
||||
<th class="sort" data-sort="email_id" scope="col">Email ID</th>
|
||||
<th class="sort" data-sort="phone" scope="col">Phone No</th>
|
||||
<th class="sort" data-sort="lead_score" scope="col">Lead Score</th>
|
||||
<th class="sort" data-sort="tags" scope="col">Tags</th>
|
||||
<th class="sort" data-sort="date" scope="col">Last Contacted</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="chk_child" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td class="name">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0"><img src="assets/images/users/avatar-10.jpg" alt="" class="avatar-xs rounded-circle"></div>
|
||||
<div class="flex-grow-1 ms-2 name">Tonya Noble</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="company_name">Nesta Technologies</td>
|
||||
<td class="email_id">tonyanoble@velzon.com</td>
|
||||
<td class="phone">414-453-5725</td>
|
||||
<td class="lead_score">154</td>
|
||||
<td class="tags">
|
||||
<span class="badge badge-soft-primary">Lead</span>
|
||||
<span class="badge badge-soft-primary">Partner</span>
|
||||
</td>
|
||||
<td class="date">15 Dec, 2021 <small class="text-muted">08:58AM</small></td>
|
||||
<td>
|
||||
<ul class="list-inline hstack gap-2 mb-0">
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Call">
|
||||
<a href="javascript:void(0);" class="text-muted d-inline-block">
|
||||
<i class="ri-phone-line fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Message">
|
||||
<a href="javascript:void(0);" class="text-muted d-inline-block">
|
||||
<i class="ri-question-answer-line fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);"><i class="ri-eye-fill align-bottom me-2 text-muted"></i>View</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i>
|
||||
Edit</a></li>
|
||||
<li><a class="dropdown-item remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i>
|
||||
Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ contacts We did not
|
||||
find any contacts for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header bg-soft-info p-3">
|
||||
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<form class="tablelist-form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="id-field" />
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="position-absolute bottom-0 end-0">
|
||||
<label for="customer-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
|
||||
<div class="avatar-xs cursor-pointer">
|
||||
<div class="avatar-title bg-light border rounded-circle text-muted">
|
||||
<i class="ri-image-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input class="form-control d-none" value="" id="customer-image-input" type="file" accept="image/png, image/gif, image/jpeg">
|
||||
</div>
|
||||
<div class="avatar-lg p-1">
|
||||
<div class="avatar-title bg-light rounded-circle">
|
||||
<img src="assets/images/users/user-dummy-img.jpg" id="customer-img" class="avatar-md rounded-circle object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="name-field" class="form-label">Name</label>
|
||||
<input type="text" id="customername-field" class="form-control" placeholder="Enter name" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="company_name-field" class="form-label">Company
|
||||
Name</label>
|
||||
<input type="text" id="company_name-field" class="form-control" placeholder="Enter company name" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="designation-field" class="form-label">Designation</label>
|
||||
<input type="text" id="designation-field" class="form-control" placeholder="Enter Designation" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="email_id-field" class="form-label">Email ID</label>
|
||||
<input type="text" id="email_id-field" class="form-control" placeholder="Enter email" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="phone-field" class="form-label">Phone</label>
|
||||
<input type="text" id="phone-field" class="form-control" placeholder="Enter phone no" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="lead_score-field" class="form-label">Lead
|
||||
Score</label>
|
||||
<input type="text" id="lead_score-field" class="form-control" placeholder="Enter value" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="taginput-choices" class="form-label font-size-13 text-muted">Tags</label>
|
||||
<select class="form-control" name="taginput-choices" id="taginput-choices" multiple>
|
||||
<option value="Lead">Lead</option>
|
||||
<option value="Partner">Partner</option>
|
||||
<option value="Exiting">Exiting</option>
|
||||
<option value="Long-term">Long-term</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-success" id="add-btn">Add
|
||||
Contact</button>
|
||||
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end add modal-->
|
||||
|
||||
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-5 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
|
||||
</lord-icon>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="fs-semibold">You are about to delete a contact ?</h4>
|
||||
<p class="text-muted fs-14 mb-4 pt-1">Deleting your contact will remove all
|
||||
of your information from our database.</p>
|
||||
<div class="hstack gap-2 justify-content-center remove">
|
||||
<button class="btn btn-link link-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button class="btn btn-danger" id="delete-record">Yes, Delete
|
||||
It!!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end delete modal -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3">
|
||||
<div class="card" id="contact-view-detail">
|
||||
<div class="card-body text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<img src="assets/images/users/avatar-10.jpg" alt="" class="avatar-lg rounded-circle img-thumbnail">
|
||||
<span class="contact-active position-absolute rounded-circle bg-success"><span class="visually-hidden"></span>
|
||||
</div>
|
||||
<h5 class="mt-4 mb-1">Tonya Noble</h5>
|
||||
<p class="text-muted">Nesta Technologies</p>
|
||||
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-success text-success fs-15 rounded">
|
||||
<i class="ri-phone-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-danger text-danger fs-15 rounded">
|
||||
<i class="ri-mail-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-warning text-warning fs-15 rounded">
|
||||
<i class="ri-question-answer-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-3">Personal Information</h6>
|
||||
<p class="text-muted mb-4">Hello, I'm Tonya Noble, The most effective objective is one that is
|
||||
tailored to the job you are applying for. It states what kind of career you are seeking, and
|
||||
what skills and experiences.</p>
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Designation</td>
|
||||
<td>Lead Designer / Developer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Email ID</td>
|
||||
<td>tonyanoble@velzon.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Phone No</td>
|
||||
<td>414-453-5725</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Lead Score</td>
|
||||
<td>154</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Tags</td>
|
||||
<td>
|
||||
<span class="badge badge-soft-primary">Lead</span>
|
||||
<span class="badge badge-soft-primary">Partner</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Last Contacted</td>
|
||||
<td>15 Dec, 2021 <small class="text-muted">08:58AM</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
<div id="removeProjectModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you Sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you Sure You want to Remove this Project ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="remove-project">Yes, Delete
|
||||
It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/crm-contact.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,473 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Leads')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Leads','CRM')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="leadsList">
|
||||
<div class="card-header border-0">
|
||||
|
||||
<div class="row g-4 align-items-center">
|
||||
<div class="col-sm-3">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto ms-auto">
|
||||
<div class="hstack gap-2">
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample"><i class="ri-filter-3-line align-bottom me-1"></i>
|
||||
Fliters</button>
|
||||
<button type="button" class="btn btn-secondary add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Add Leads</button>
|
||||
<span class="dropdown">
|
||||
<button class="btn btn-soft-info btn-icon fs-14" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-settings-4-line"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<li><a class="dropdown-item" href="#">Copy</a></li>
|
||||
<li><a class="dropdown-item" href="#">Move to pipline</a></li>
|
||||
<li><a class="dropdown-item" href="#">Add to exceptions</a></li>
|
||||
<li><a class="dropdown-item" href="#">Switch to common form view</a></li>
|
||||
<li><a class="dropdown-item" href="#">Reset form view to default</a></li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table align-middle" id="customerTable">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" style="width: 50px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="sort" data-sort="name">Name</th>
|
||||
<th class="sort" data-sort="company_name">Company</th>
|
||||
<th class="sort" data-sort="leads_score">Leads Score</th>
|
||||
<th class="sort" data-sort="phone">Phone</th>
|
||||
<th class="sort" data-sort="location">Location</th>
|
||||
<th class="sort" data-sort="tags">Tags</th>
|
||||
<th class="sort" data-sort="date">Create Date</th>
|
||||
<th class="sort" data-sort="action">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="chk_child" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ2101</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-xxs rounded-circle image_src object-cover">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2 name">Tonya Noble</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="company_name">Force Medicines</td>
|
||||
<td class="leads_score">147</td>
|
||||
<td class="phone">580-464-4694</td>
|
||||
<td class="location">Los Angeles, USA</td>
|
||||
<td class="tags">
|
||||
<span class="badge badge-soft-primary">Lead</span>
|
||||
<span class="badge badge-soft-primary">Partner</span>
|
||||
</td>
|
||||
<td class="date">07 Apr, 2021</td>
|
||||
<td>
|
||||
<ul class="list-inline hstack gap-2 mb-0">
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Call">
|
||||
<a href="javascript:void(0);" class="text-muted d-inline-block">
|
||||
<i class="ri-phone-line fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Message">
|
||||
<a href="javascript:void(0);" class="text-muted d-inline-block">
|
||||
<i class="ri-question-answer-line fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
|
||||
<a href="javascript:void(0);"><i class="ri-eye-fill align-bottom text-muted"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
|
||||
<a class="edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-pencil-fill align-bottom text-muted"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Delete">
|
||||
<a class="remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal">
|
||||
<i class="ri-delete-bin-fill align-bottom text-muted"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ leads We did not find
|
||||
any leads for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light p-3">
|
||||
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<form class="tablelist-form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="id-field" />
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="position-absolute bottom-0 end-0">
|
||||
<label for="lead-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
|
||||
<div class="avatar-xs cursor-pointer">
|
||||
<div class="avatar-title bg-light border rounded-circle text-muted">
|
||||
<i class="ri-image-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input class="form-control d-none" value="" id="lead-image-input" type="file" accept="image/png, image/gif, image/jpeg">
|
||||
</div>
|
||||
<div class="avatar-lg p-1">
|
||||
<div class="avatar-title bg-light rounded-circle">
|
||||
<img src="/assets/images/users/user-dummy-img.jpg" id="lead-img" class="avatar-md rounded-circle object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fs-13 mt-3">Lead Image</h5>
|
||||
</div>
|
||||
<div>
|
||||
<label for="leadname-field" class="form-label">Name</label>
|
||||
<input type="text" id="leadname-field" class="form-control" placeholder="Enter Name" required />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="company_name-field" class="form-label">Company
|
||||
Name</label>
|
||||
<input type="text" id="company_name-field" class="form-control" placeholder="Enter company name" required />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="leads_score-field" class="form-label">Leads
|
||||
Score</label>
|
||||
<input type="text" id="leads_score-field" class="form-control" placeholder="Enter lead score" required />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="phone-field" class="form-label">Phone</label>
|
||||
<input type="text" id="phone-field" class="form-control" placeholder="Enter phone no" required />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="location-field" class="form-label">Location</label>
|
||||
<input type="text" id="location-field" class="form-control" placeholder="Enter location" required />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="taginput-choices" class="form-label">Tags</label>
|
||||
<select class="form-control" name="taginput-choices" id="taginput-choices" multiple>
|
||||
<option value="Lead">Lead</option>
|
||||
<option value="Partner">Partner</option>
|
||||
<option value="Exiting">Exiting</option>
|
||||
<option value="Long-term">Long-term</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="date-field" class="form-label">Created Date</label>
|
||||
<input type="date" id="date-field" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" placeholder="Select Date" required />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary" id="add-btn">Add
|
||||
leads</button>
|
||||
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal-->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-labelledby="deleteRecordLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-5 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
|
||||
</lord-icon>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="fs-semibold">You are about to delete a lead ?</h4>
|
||||
<p class="text-muted fs-14 mb-4 pt-1">Deleting your lead will remove all of
|
||||
your information from our database.</p>
|
||||
<div class="hstack gap-2 justify-content-center remove">
|
||||
|
||||
<button class="btn btn-link link-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button class="btn btn-danger" id="delete-record">Yes, Delete
|
||||
It!!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal -->
|
||||
|
||||
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
|
||||
<div class="offcanvas-header bg-light">
|
||||
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Leads Fliters</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<!--end offcanvas-header-->
|
||||
<form action="" class="d-flex flex-column justify-content-end h-100">
|
||||
<div class="offcanvas-body">
|
||||
<div class="mb-4">
|
||||
<label for="datepicker-range" class="form-label text-muted text-uppercase fw-semibold mb-3">Date</label>
|
||||
<input type="date" class="form-control" id="datepicker-range" data-provider="flatpickr" data-range="true" placeholder="Select date">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="country-select" class="form-label text-muted text-uppercase fw-semibold mb-3">Country</label>
|
||||
<select class="form-control" data-choices data-choices-multiple-remove="true" name="country-select" id="country-select" multiple>
|
||||
<option value="">Select country</option>
|
||||
<option value="Argentina">Argentina</option>
|
||||
<option value="Belgium">Belgium</option>
|
||||
<option value="Brazil" selected>Brazil</option>
|
||||
<option value="Colombia">Colombia</option>
|
||||
<option value="Denmark">Denmark</option>
|
||||
<option value="France">France</option>
|
||||
<option value="Germany">Germany</option>
|
||||
<option value="Mexico">Mexico</option>
|
||||
<option value="Russia">Russia</option>
|
||||
<option value="Spain">Spain</option>
|
||||
<option value="Syria">Syria</option>
|
||||
<option value="United Kingdom" selected>United Kingdom</option>
|
||||
<option value="United States of America">United States of America</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="status-select" class="form-label text-muted text-uppercase fw-semibold mb-3">Status</label>
|
||||
<div class="row g-2">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
|
||||
<label class="form-check-label" for="inlineCheckbox1">New
|
||||
Leads</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
|
||||
<label class="form-check-label" for="inlineCheckbox2">Old
|
||||
Leads</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
|
||||
<label class="form-check-label" for="inlineCheckbox3">Loss
|
||||
Leads</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option4">
|
||||
<label class="form-check-label" for="inlineCheckbox4">Follow
|
||||
Up</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="leadscore" class="form-label text-muted text-uppercase fw-semibold mb-3">Lead
|
||||
Score</label>
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-lg">
|
||||
<input type="number" class="form-control" id="leadscore" placeholder="0">
|
||||
</div>
|
||||
<div class="col-lg-auto">
|
||||
To
|
||||
</div>
|
||||
<div class="col-lg">
|
||||
<input type="number" class="form-control" id="leadscore" placeholder="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="leads-tags" class="form-label text-muted text-uppercase fw-semibold mb-3">Tags</label>
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="marketing" value="marketing">
|
||||
<label class="form-check-label" for="marketing">Marketing</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="management" value="management">
|
||||
<label class="form-check-label" for="management">Management</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="business" value="business">
|
||||
<label class="form-check-label" for="business">Business</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="investing" value="investing">
|
||||
<label class="form-check-label" for="investing">Investing</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="partner" value="partner">
|
||||
<label class="form-check-label" for="partner">Partner</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="lead" value="lead">
|
||||
<label class="form-check-label" for="lead">Leads</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="sale" value="sale">
|
||||
<label class="form-check-label" for="sale">Sale</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="owner" value="owner">
|
||||
<label class="form-check-label" for="owner">Owner</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="banking" value="banking">
|
||||
<label class="form-check-label" for="banking">Banking</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="banking" value="banking">
|
||||
<label class="form-check-label" for="banking">Exiting</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="banking" value="banking">
|
||||
<label class="form-check-label" for="banking">Finance</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="banking" value="banking">
|
||||
<label class="form-check-label" for="banking">Fashion</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end offcanvas-body-->
|
||||
<div class="offcanvas-footer border-top p-3 text-center hstack gap-2">
|
||||
<button class="btn btn-light w-100">Clear Filter</button>
|
||||
<button type="submit" class="btn btn-primary w-100">Filters</button>
|
||||
</div>
|
||||
<!--end offcanvas-footer-->
|
||||
</form>
|
||||
</div>
|
||||
<!--end offcanvas-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
<script src="/assets/js/pages/crm-leads.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,644 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Buy & Sell')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!--Swiper slider css-->
|
||||
<link href="/assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Buy & Sell','Crypto')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="text-muted mb-3">Total Buy</h6>
|
||||
<h4 class="mb-0">$<span class="counter-value" data-target="243"></span><small class="text-muted fs-13">.10k</small></h4>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-secondary text-secondary fs-22 rounded">
|
||||
<i class="ri-shopping-bag-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="text-muted mb-3">Total Sell</h6>
|
||||
<h4 class="mb-0">$<span class="counter-value" data-target="658"></span><small class="text-muted fs-13">.00k</small></h4>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-success text-success fs-22 rounded">
|
||||
<i class="ri-funds-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="text-muted mb-3">Today's Buy</h6>
|
||||
<h4 class="mb-0">$<span class="counter-value" data-target="104"></span><small class="text-muted fs-13">.85k</small></h4>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-primary text-primary fs-22 rounded">
|
||||
<i class="ri-arrow-left-down-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="text-muted mb-3">Today's Sell</h6>
|
||||
<h4 class="mb-0">$<span class="counter-value" data-target="87"></span><small class="text-muted fs-13">.35k</small></h4>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-info text-info fs-22 rounded">
|
||||
<i class="ri-arrow-right-up-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-9">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header border-0 align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Market Graph</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-soft-secondary btn-sm">
|
||||
1H
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-secondary btn-sm">
|
||||
7D
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-secondary btn-sm">
|
||||
1M
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-secondary btn-sm">
|
||||
1Y
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-primary btn-sm">
|
||||
ALL
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body p-0">
|
||||
<div class="bg-soft-light border-top-dashed border border-start-0 border-end-0 border-bottom-dashed py-3 px-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="d-flex flex-wrap gap-4 align-items-center">
|
||||
<div>
|
||||
<h3 class="fs-19">$46,959.<small class="fs-14 text-muted">00</small></h3>
|
||||
<p class="text-muted text-uppercase fw-medium mb-0">Bitcoin (BTC) <small class="badge badge-soft-success"><i class="ri-arrow-right-up-line align-bottom"></i> 2.15%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="d-flex">
|
||||
<div class="d-flex justify-content-end text-end flex-wrap gap-4 ms-auto">
|
||||
<div class="pe-3">
|
||||
<h6 class="mb-2 text-muted">High</h6>
|
||||
<h5 class="text-success mb-0">$28,722.76</h5>
|
||||
</div>
|
||||
<div class="pe-3">
|
||||
<h6 class="mb-2 text-muted">Low</h6>
|
||||
<h5 class="text-danger mb-0">$68,789.63</h5>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-2 text-muted">Market Volume</h6>
|
||||
<h5 class="text-danger mb-0">$888,411,910</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div><!-- end cardbody -->
|
||||
<div class="card-body p-0 pb-3">
|
||||
<div id="Market_chart" data-colors='["--vz-success", "--vz-danger"]' class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end cardbody -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs-custom rounded card-header-tabs nav-justified border-bottom-0 mx-n3" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#cryptoBuy" role="tab">
|
||||
Buy
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#cryptoSell" role="tab">
|
||||
Sell
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="tab-content text-muted">
|
||||
<div class="tab-pane active" id="cryptoBuy" role="tabpanel">
|
||||
<div class="p-3 bg-soft-warning">
|
||||
<div class="float-end ms-2">
|
||||
<h6 class="text-warning mb-0">USD Balance : <span class="text-dark">$12,426.07</span></h6>
|
||||
</div>
|
||||
<h6 class="mb-0 text-danger">Buy Coin</h6>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label>Currency :</label>
|
||||
<select class="form-select">
|
||||
<option>BTC</option>
|
||||
<option>ETH</option>
|
||||
<option>LTC</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label>Payment Method :</label>
|
||||
<select class="form-select">
|
||||
<option>Wallet Balance</option>
|
||||
<option>Credit / Debit Card</option>
|
||||
<option>PayPal</option>
|
||||
<option>Payoneer</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
<div>
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Amount</label>
|
||||
<input type="text" class="form-control" placeholder="0">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Price</label>
|
||||
<input type="text" class="form-control" placeholder="2.045585">
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-0">
|
||||
<label class="input-group-text">Total</label>
|
||||
<input type="text" class="form-control" placeholder="2700.16">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-2">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="flex-grow-1">
|
||||
<p class="fs-13 mb-0">Transaction Fees<span class="text-muted ms-1 fs-11">(0.05%)</span></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">$1.08</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="flex-grow-1">
|
||||
<p class="fs-13 mb-0">Minimum Received<span class="text-muted ms-1 fs-11">(2%)</span></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">$7.85</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<p class="fs-13 mb-0">Estimated Rate</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">1 BTC ~ $46982.70</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-2">
|
||||
<button type="button" class="btn btn-primary w-100">Buy Coin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end tab-pane-->
|
||||
<div class="tab-pane" id="cryptoSell" role="tabpanel">
|
||||
<div class="p-3 bg-soft-warning">
|
||||
<div class="float-end ms-2">
|
||||
<h6 class="text-warning mb-0">USD Balance : <span class="text-dark">$12,426.07</span></h6>
|
||||
</div>
|
||||
<h6 class="mb-0 text-danger">Sell Coin</h6>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label for="currencySelect">Currency :</label>
|
||||
<select class="form-select" id="currencySelect">
|
||||
<option value="BTC" selected>BTC</option>
|
||||
<option value="ETH">ETH</option>
|
||||
<option value="EUR">EUR</option>
|
||||
<option value="JPY">JPY</option>
|
||||
<option value="LTC">LTC</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<div class="mb-3">
|
||||
<label for="paymentMethod">Payment Method :</label>
|
||||
<select class="form-select" id="paymentMethod">
|
||||
<option>Wallet Balance</option>
|
||||
<option>Credit / Debit Card</option>
|
||||
<option>PayPal</option>
|
||||
<option>Payoneer</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
<div>
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Amount</label>
|
||||
<input type="text" class="form-control" placeholder="0">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Price</label>
|
||||
<input type="text" class="form-control" placeholder="2.045585">
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
<div class="input-group mb-0">
|
||||
<label class="input-group-text">Total</label>
|
||||
<input type="text" class="form-control" placeholder="2700.16">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-2">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="flex-grow-1">
|
||||
<p class="fs-13 mb-0">Transaction Fees<span class="text-muted ms-1 fs-11">(0.05%)</span></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">$1.08</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="flex-grow-1">
|
||||
<p class="fs-13 mb-0">Minimum Received<span class="text-muted ms-1 fs-11">(2%)</span></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">$7.85</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<p class="fs-13 mb-0">Estimated Rate</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">1 BTC ~ $46982.70</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-2">
|
||||
<button type="button" class="btn btn-danger w-100">Sell Coin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end tab-pane-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="card" id="marketList">
|
||||
<div class="card-header border-bottom-dashed">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-3">
|
||||
<h5 class="card-title mb-0">Markets</h5>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-auto ms-auto">
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-soft-secondary"><i class="ri-equalizer-line align-bottom me-1"></i>
|
||||
Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<!--end card-header-->
|
||||
<div class="card-body p-0 border-bottom border-bottom-dashed">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search border-0 py-3" placeholder="Search to currency...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table align-middle table-nowrap" id="customerTable">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th class="sort" data-sort="currency_name" scope="col">Currency</th>
|
||||
<th class="sort" data-sort="current_value" scope="col">Price</th>
|
||||
<th class="sort" data-sort="pairs" scope="col">Pairs</th>
|
||||
<th class="sort" data-sort="high" scope="col">24 High</th>
|
||||
<th class="sort" data-sort="low" scope="col">24 Low</th>
|
||||
<th class="sort" data-sort="market_cap" scope="col">Market Volume</th>
|
||||
<th class="sort" data-sort="valume" scope="col">Volume %</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--end thead-->
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/btc.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Bitcoin (BTC)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$47,071.60</td>
|
||||
<td class="pairs">BTC/USD</td>
|
||||
<td class="high">$28,722.76</td>
|
||||
<td class="low">$68,789.63</td>
|
||||
<td class="market_cap">$888,411,910</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>1.50%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ002</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/eth.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Ethereum (ETH)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$3,813.14</td>
|
||||
<td class="pairs">ETH/USDT</td>
|
||||
<td class="high">$4,036.24</td>
|
||||
<td class="low">$3,588.14</td>
|
||||
<td class="market_cap">$314,520,675</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-danger fs-13 mb-0"><i class="mdi mdi-trending-down align-middle me-1"></i>0.42%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ003</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/ltc.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Litecoin (LTC)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$149.65</td>
|
||||
<td class="pairs">LTC/USDT</td>
|
||||
<td class="high">$412.96</td>
|
||||
<td class="low">$104.33</td>
|
||||
<td class="market_cap">$314,520,675</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>0.89%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ004</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/xmr.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Monero (XMR)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$17,491.16</td>
|
||||
<td class="pairs">XRM/USDT</td>
|
||||
<td class="high">$31,578.35</td>
|
||||
<td class="low">$8691.75</td>
|
||||
<td class="market_cap">$9,847,327</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>1.92%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ005</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/sol.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Solana (SOL)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$172.93</td>
|
||||
<td class="pairs">SOL/USD</td>
|
||||
<td class="high">$178.37</td>
|
||||
<td class="low">$172.3</td>
|
||||
<td class="market_cap">$40,559,274</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-danger fs-13 mb-0"><i class="mdi mdi-trending-down align-middle me-1"></i>2.87%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ006</a></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/ant.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Aragon (ANT)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$13.31</td>
|
||||
<td class="pairs">ANT/USD</td>
|
||||
<td class="high">$13.85</td>
|
||||
<td class="low">$12.53</td>
|
||||
<td class="market_cap">$156,209,195.18</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>3.96%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ007</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/fil.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Filecoin (FIL)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$35.21</td>
|
||||
<td class="pairs">FIL/USD</td>
|
||||
<td class="high">$36.41</td>
|
||||
<td class="low">$35.03</td>
|
||||
<td class="market_cap">$374,618,945.51</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-danger fs-13 mb-0"><i class="mdi mdi-trending-down align-middle me-1"></i>0.84%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ008</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/aave.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Aave (AAVE)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$275.47</td>
|
||||
<td class="pairs">AAVE/USDT</td>
|
||||
<td class="high">$277.11</td>
|
||||
<td class="low">$255.01</td>
|
||||
<td class="market_cap">$156,209,195.18</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>8.20%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ009</a></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/ada.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Cardano (ADA)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$1.35</td>
|
||||
<td class="pairs">ADA/USD</td>
|
||||
<td class="high">$1.39</td>
|
||||
<td class="low">$1.32</td>
|
||||
<td class="market_cap">$880,387,980.14</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-danger fs-13 mb-0"><i class="mdi mdi-trending-down align-middle me-1"></i>0.42%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ010</a></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/dot.svg" alt="" class="avatar-xxs me-2">
|
||||
<a href="javascript:void(0);" class="currency_name">Polkadot (DOT)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="current_value">$28.88</td>
|
||||
<td class="pairs">DOT/USD</td>
|
||||
<td class="high">$30.56</td>
|
||||
<td class="low">$28.66</td>
|
||||
<td class="market_cap">$880,387,980.14</td>
|
||||
<td class="valume">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>1.03%</h6>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-soft-info">Trade Now</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ Currencies We did not find any
|
||||
Currencies for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
<script src="/assets/js/pages/crypto-buy-sell.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,632 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('ICO List')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('ICO List','Crypto')"></div>
|
||||
|
||||
<div class="row row-cols-xxl-5 row-cols-lg-3 row-cols-sm-2 row-cols-1">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h4>4751</h4>
|
||||
<h6 class="text-muted fs-13 mb-0">ICOs Published</h6>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-primary text-primary fs-22 rounded">
|
||||
<i class="ri-upload-2-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h4>3423</h4>
|
||||
<h6 class="text-muted fs-13 mb-0">Active ICOs</h6>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-secondary text-secondary fs-22 rounded">
|
||||
<i class="ri-remote-control-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h4>354</h4>
|
||||
<h6 class="text-muted fs-13 mb-0">ICOs Trading</h6>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-success text-success fs-22 rounded">
|
||||
<i class="ri-flashlight-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h4>2762</h4>
|
||||
<h6 class="text-muted fs-13 mb-0">Funded ICOs</h6>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-danger text-danger fs-22 rounded">
|
||||
<i class="ri-hand-coin-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h4>1585</h4>
|
||||
<h6 class="text-muted fs-13 mb-0">Upcoming ICO</h6>
|
||||
</div>
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-soft-warning text-warning fs-22 rounded">
|
||||
<i class="ri-donut-chart-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-xxl-4 col-lg-6">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control" placeholder="Search to ICOs...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-lg-6">
|
||||
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y"
|
||||
data-range-date="true" placeholder="Select date">
|
||||
</div>
|
||||
<div class="col-xxl-2 col-lg-4">
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
name="choices-single-default2" id="choices-single-default2">
|
||||
<option value="Active">Active</option>
|
||||
<option value="Ended">Ended</option>
|
||||
<option value="Upcoming">Upcoming</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-lg-4">
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
name="choices-single-default" id="choices-single-default">
|
||||
<option value="">Select Rating</option>
|
||||
<option value="1">1 star</option>
|
||||
<option value="2">2 star</option>
|
||||
<option value="3">3 star</option>
|
||||
<option value="4">4 star</option>
|
||||
<option value="5">5 star</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-1 col-lg-4">
|
||||
<button class="btn btn-primary w-100"><i class="ri-equalizer-line align-bottom me-1"></i>
|
||||
Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-3 col-md-6">
|
||||
<div class="card overflow-hidden shadow-none">
|
||||
<div class="card-body bg-soft-success">
|
||||
<h5 class="fs-17 text-center mb-0">Active ICOs</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/btc.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Data Wallet</h5>
|
||||
<p class="text-muted mb-2">Blockchain Services</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$15,00,000 / $13,75,954 <span
|
||||
class="badge badge-soft-success">89.97%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">4.8 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-danger mb-0"><i class="ri-time-line align-bottom"></i> 05 Days
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/companies/img-6.png" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">GreatRiver Technology</h5>
|
||||
<p class="text-muted mb-2">Information Technology</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-1">$39,00,000 / $31,57,654 <span
|
||||
class="badge badge-soft-success">84.57%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">4.4 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-danger mb-0"><i class="ri-time-line align-bottom"></i> 15 Days
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/vtc.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Manta Network Finance</h5>
|
||||
<p class="text-muted mb-2">Finance Services</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$42,50,000 / $30,84,214 <span
|
||||
class="badge badge-soft-success">70.24%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">2.7 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-warning mb-0"><i class="ri-time-line align-bottom"></i> 25
|
||||
Jan, 2022</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/xsg.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Goldfinch Network</h5>
|
||||
<p class="text-muted mb-2">Blockchain Services</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$28,00,000 / $8,74,986 <span
|
||||
class="badge badge-soft-success">24.57%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">3.2 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-warning mb-0"><i class="ri-time-line align-bottom"></i> 04
|
||||
Feb, 2022</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/companies/img-8.png" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Galaxy War</h5>
|
||||
<p class="text-muted mb-2">Gaming</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$40,00,000 / $24,12,741 <span
|
||||
class="badge badge-soft-success">62.04%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">3.9 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-warning mb-0"><i class="ri-time-line align-bottom"></i> 05
|
||||
March, 2022</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-3 col-md-6">
|
||||
<div class="card overflow-hidden shadow-none">
|
||||
<div class="card-body bg-soft-danger">
|
||||
<h5 class="fs-17 text-center mb-0">Ended ICOs</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/bela.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Social Chain</h5>
|
||||
<p class="text-muted mb-2">Blockchain Services</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$14,00,000 / $13,20,471 <span
|
||||
class="badge badge-soft-success">97.62%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">2.8 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-muted mb-0"><i class="ri-time-line align-bottom"></i> 02 Jan,
|
||||
2022</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/arn.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Angels Crypto</h5>
|
||||
<p class="text-muted mb-2">Blockchain Services</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$75,00,000 / $59,10,412 <span
|
||||
class="badge badge-soft-success">89.13%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">2.1 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-muted mb-0"><i class="ri-time-line align-bottom"></i> 23 Dec,
|
||||
2021</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/cs.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Codex Exchange</h5>
|
||||
<p class="text-muted mb-2">Exchange</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$32,00,000 / $28,65,732 <span
|
||||
class="badge badge-soft-success">78.43%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">3.0 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-muted mb-0"><i class="ri-time-line align-bottom"></i> 04 Oct,
|
||||
2021</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-3 col-md-6">
|
||||
<div class="card overflow-hidden shadow-none">
|
||||
<div class="card-body bg-soft-primary">
|
||||
<h5 class="fs-17 text-center mb-0">Upcoming ICOs</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/add.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">World Doin</h5>
|
||||
<p class="text-muted mb-2">Blockchain Services</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$64,00,000</h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">4.7 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-primary mb-0"><i class="ri-time-line align-bottom"></i> 15
|
||||
Jan, 2022</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/atm.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Bridge Plus</h5>
|
||||
<p class="text-muted mb-2">Platform</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$45,80,000</h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">3.5 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-muted mb-0">-</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-3 col-md-6">
|
||||
<div class="card overflow-hidden shadow-none">
|
||||
<div class="card-body bg-soft-info">
|
||||
<h5 class="fs-17 text-center mb-0">Trading ICOs</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-2 ribbon-box ribbon-fill right">
|
||||
<div class="ribbon ribbon-info shadow-none"><i class="ri-flashlight-fill me-1"></i> 1</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/bcbc.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">PowerCoin</h5>
|
||||
<p class="text-muted mb-2">Blockchain Services</p>
|
||||
</div>
|
||||
<div class="me-4">
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$1,50,00,000 / $1,11,65,368 <span
|
||||
class="badge badge-soft-success">86.61%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">4.9 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-warning mb-0"><i class="ri-time-line align-bottom"></i> 16
|
||||
Feb, 2022</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card mb-2 ribbon-box ribbon-fill right">
|
||||
<div class="ribbon ribbon-info shadow-none"><i class="ri-flashlight-fill me-1"></i> 2</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/bix.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Cyber Wonder</h5>
|
||||
<p class="text-muted mb-2">Platform</p>
|
||||
</div>
|
||||
<div class="me-4">
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$80,00,000 / $36,40,352 <span
|
||||
class="badge badge-soft-success">48.08%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">4.7 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-warning mb-0"><i class="ri-time-line align-bottom"></i> 23
|
||||
Jan, 2022</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card mb-2 ribbon-box ribbon-fill right">
|
||||
<div class="ribbon ribbon-info shadow-none"><i class="ri-flashlight-fill me-1"></i> 3</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/rise.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">RootCoin</h5>
|
||||
<p class="text-muted mb-2">Blockchain Services</p>
|
||||
</div>
|
||||
<div class="me-4">
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$95,00,000 / $78,95,041 <span
|
||||
class="badge badge-soft-success">76.05%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">3.2 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-warning mb-0"><i class="ri-time-line align-bottom"></i> 30
|
||||
Dec, 2021</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card ribbon-box ribbon-fill right">
|
||||
<div class="ribbon ribbon-info shadow-none"><i class="ri-flashlight-fill me-1"></i> 4</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/svg/crypto-icons/ark.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15 mb-1">Arcana Finance</h5>
|
||||
<p class="text-muted mb-2">Finance Services</p>
|
||||
</div>
|
||||
<div class="me-4">
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary">Visit Website <i
|
||||
class="ri-arrow-right-up-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-muted mb-0">$68,00,000 / $45,85,367 <span
|
||||
class="badge badge-soft-success">71.16%</span></h6>
|
||||
</div>
|
||||
<div class="card-body border-top border-top-dashed">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">3.2 <i class="ri-star-fill align-bottom text-warning"></i></h6>
|
||||
</div>
|
||||
<h6 class="flex-shrink-0 text-warning mb-0"><i class="ri-time-line align-bottom"></i> 02
|
||||
Dec, 2021</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
@ -1,345 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('KYC Application')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('KYC Application','Crypto')"></div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-9">
|
||||
<h4 class="mt-4 fw-semibold">KYC Verification</h4>
|
||||
<p class="text-muted mt-3">When you get your KYC verification process done, you have
|
||||
given the crypto exchange in this case, information.</p>
|
||||
<div class="mt-4">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Click here for Verification
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-5 mb-2">
|
||||
<div class="col-sm-7 col-8">
|
||||
<img src="/assets/images/verification-img.png" alt="" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header p-3">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Verify your Account</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<form action="#" class="checkout-tab">
|
||||
<div class="modal-body p-0">
|
||||
<div class="step-arrow-nav">
|
||||
<ul class="nav nav-pills nav-justified custom-nav" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link p-3 active" id="pills-bill-info-tab" data-bs-toggle="pill" data-bs-target="#pills-bill-info" type="button" role="tab" aria-controls="pills-bill-info" aria-selected="true">Personal
|
||||
Info</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link p-3" id="pills-bill-address-tab" data-bs-toggle="pill" data-bs-target="#pills-bill-address" type="button" role="tab" aria-controls="pills-bill-address" aria-selected="false">Bank
|
||||
Details</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link p-3" id="pills-payment-tab" data-bs-toggle="pill" data-bs-target="#pills-payment" type="button" role="tab" aria-controls="pills-payment" aria-selected="false">Document
|
||||
Verification</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link p-3" id="pills-finish-tab" data-bs-toggle="pill" data-bs-target="#pills-finish" type="button" role="tab" aria-controls="pills-finish" aria-selected="false">Verified</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal-body-->
|
||||
<div class="modal-body">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="pills-bill-info" role="tabpanel" aria-labelledby="pills-bill-info-tab">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="firstName" class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName" placeholder="Enter your firstname">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="lastName" class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName" placeholder="Enter your lastname">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="phoneNumber" class="form-label">Phone</label>
|
||||
<input type="text" class="form-control" id="phoneNumber" placeholder="Enter your phone number">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="dateofBirth" class="form-label">Date of Birth</label>
|
||||
<input type="text" class="form-control" id="dateofBirth" data-provider="flatpickr" placeholder="Enter your date of birth">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="emailID" class="form-label">Email ID</label>
|
||||
<input type="email" class="form-control" id="emailID" placeholder="Enter your email">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="password" placeholder="Enter your password">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="confirmPassword" class="form-label">Confirm Password</label>
|
||||
<input type="password" class="form-control" id="confirmPassword" placeholder="Enter your confirm password">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="vatNo" class="form-label">VAT/TIN No.</label>
|
||||
<input type="text" class="form-control" id="vatNo" placeholder="Enter your VAT/TIN no">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="serviceTax" class="form-label">Service Tax No.</label>
|
||||
<input type="text" class="form-control" id="serviceTax" placeholder="Enter your service tax no">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="country-select" class="form-label">Country</label>
|
||||
<select class="form-control" data-choices name="country-select" id="country-select">
|
||||
<option value="">Select country</option>
|
||||
<option value="Argentina">Argentina</option>
|
||||
<option value="Belgium">Belgium</option>
|
||||
<option value="Brazil">Brazil</option>
|
||||
<option value="Colombia">Colombia</option>
|
||||
<option value="Denmark">Denmark</option>
|
||||
<option value="France">France</option>
|
||||
<option value="Germany">Germany</option>
|
||||
<option value="Mexico">Mexico</option>
|
||||
<option value="Russia">Russia</option>
|
||||
<option value="Spain">Spain</option>
|
||||
<option value="Syria">Syria</option>
|
||||
<option value="United Kingdom">United Kingdom</option>
|
||||
<option value="United States of America">United States of America
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="d-flex align-items-start gap-3 mt-3">
|
||||
<button type="button" class="btn btn-secondary btn-label right ms-auto nexttab" data-nexttab="pills-bill-address-tab"><i class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>
|
||||
Next Step</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
|
||||
<div class="tab-pane fade" id="pills-bill-address" role="tabpanel" aria-labelledby="pills-bill-address-tab">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="banknameInput" class="form-label">Bank Name</label>
|
||||
<input type="text" class="form-control" id="banknameInput" placeholder="Enter your bank name">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="branchInput" class="form-label">Branch</label>
|
||||
<input type="text" class="form-control" id="branchInput" placeholder="Branch">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label for="accountnameInput" class="form-label">Account Holder
|
||||
Name</label>
|
||||
<input type="text" class="form-control" id="accountnameInput" placeholder="Enter account holder name">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="accountnumberInput" class="form-label">Account
|
||||
Number</label>
|
||||
<input type="number" class="form-control" id="accountnumberInput" placeholder="Enter account number">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="ifscInput" class="form-label">IFSC</label>
|
||||
<input type="number" class="form-control" id="ifscInput" placeholder="IFSC">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="hstack align-items-start gap-3 mt-4">
|
||||
<button type="button" class="btn btn-light btn-label previestab" data-previous="pills-bill-info-tab"><i class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>Back
|
||||
to Personal Info</button>
|
||||
<button type="button" class="btn btn-secondary btn-label right ms-auto nexttab" data-nexttab="pills-payment-tab"><i class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>Next
|
||||
Step</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
|
||||
<div class="tab-pane fade" id="pills-payment" role="tabpanel" aria-labelledby="pills-payment-tab">
|
||||
<h5 class="mb-3">Choose Document Type</h5>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<div>
|
||||
<input type="radio" class="btn-check" id="passport" checked name="choose-document">
|
||||
<label class="btn btn-outline-primary" for="passport">Passport</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" class="btn-check" id="aadhar-card" name="choose-document">
|
||||
<label class="btn btn-outline-primary" for="aadhar-card">Aadhar Card</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" class="btn-check" id="pan-card" name="choose-document">
|
||||
<label class="btn btn-outline-primary" for="pan-card">Pan Card</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" class="btn-check" id="other" name="choose-document">
|
||||
<label class="btn btn-outline-primary" for="other">Other</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropzone d-flex align-items-center">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" multiple="multiple">
|
||||
</div>
|
||||
<div class="dz-message needsclick text-center">
|
||||
<div class="mb-3">
|
||||
<i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
|
||||
</div>
|
||||
|
||||
<h4>Drop files here or click to upload.</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled mb-0" id="dropzone-preview">
|
||||
<li class="mt-2" id="dropzone-preview-list">
|
||||
<div class="border rounded">
|
||||
<div class="d-flex p-2">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm bg-light rounded">
|
||||
<img src="#" alt="" data-dz-thumbnail class="img-fluid rounded d-block" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="pt-1">
|
||||
<h5 class="fs-14 mb-1" data-dz-name> </h5>
|
||||
<p class="fs-13 text-muted mb-0" data-dz-size></p>
|
||||
<strong class="error text-danger" data-dz-errormessage></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-3">
|
||||
<button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end dropzon-preview -->
|
||||
<div class="d-flex align-items-start gap-3 mt-4">
|
||||
<button type="button" class="btn btn-light btn-label previestab" data-previous="pills-bill-address-tab"><i class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>Back
|
||||
to Bank Details</button>
|
||||
<button type="button" class="btn btn-secondary btn-label right ms-auto nexttab" data-nexttab="pills-finish-tab"><i class="ri-save-line label-icon align-middle fs-16 ms-2"></i>Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
|
||||
<div class="tab-pane fade" id="pills-finish" role="tabpanel" aria-labelledby="pills-finish-tab">
|
||||
<div class="row text-center justify-content-center py-4">
|
||||
<div class="col-lg-11">
|
||||
<div class="mb-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop" colors="primary:#687cfe,secondary:#ff7f5d" style="width:120px;height:120px"></lord-icon>
|
||||
</div>
|
||||
<h5>Verification Completed</h5>
|
||||
<p class="text-muted mb-4">To stay verified, don't remove the meta tag form
|
||||
your site's home page. To avoid losing verification, you may want to add
|
||||
multiple methods form the <span class="fw-medium">Crypto > KYC
|
||||
Application.</span></p>
|
||||
|
||||
<div class="hstack justify-content-center gap-2">
|
||||
<button type="button" class="btn btn-ghost-success" data-bs-dismiss="modal">Done <i class="ri-thumb-up-fill align-bottom me-1"></i></button>
|
||||
<button type="button" class="btn btn-secondary"><i class="ri-home-4-line align-bottom ms-1"></i> Back to
|
||||
Home</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
</div>
|
||||
<!-- end tab content -->
|
||||
</div>
|
||||
<!--end modal-body-->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- dropzone min -->
|
||||
<script src="/assets/libs/dropzone/dropzone-min.js"></script>
|
||||
|
||||
<!--crypto-kyc init-->
|
||||
<script src="/assets/js/pages/crypto-kyc.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,361 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Orders')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Orders','Crypto')"></div>
|
||||
|
||||
<div class="row" id="contactList">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex align-items-center border-0">
|
||||
<h5 class="card-title mb-0 flex-grow-1">All Orders</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flax-shrink-0 hstack gap-2">
|
||||
<button class="btn btn-primary">Today's Orders</button>
|
||||
<button class="btn btn-soft-success">Past Orders</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body border border-dashed border-end-0 border-start-0">
|
||||
<div class="row g-2">
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search to orders...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="basic-addon1"><i class="ri-calendar-2-line"></i></span>
|
||||
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" placeholder="Select date" id="range-datepicker" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-2 col-md-4">
|
||||
<select class="form-control" data-choices data-choices-search-false name="idType" id="idType">
|
||||
<option value="all">Select Type</option>
|
||||
<option value="Buy">Buy</option>
|
||||
<option value="Sell">Sell</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-2 col-md-4">
|
||||
<select class="form-control" data-choices data-choices-search-false name="idStatus" id="idStatus">
|
||||
<option value="all">Select Status</option>
|
||||
<option value="Successful">Successful</option>
|
||||
<option value="Cancelled">Cancelled</option>
|
||||
<option value="Pending">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-1 col-md-4">
|
||||
<button class="btn btn-secondary w-100" onclick="filterData();">Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table align-middle table-nowrap" id="customerTable">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th class="sort" data-sort="time" scope="col">Date</th>
|
||||
<th class="sort" data-sort="currency_name" scope="col">Name</th>
|
||||
<th class="sort" data-sort="type" scope="col">Type</th>
|
||||
<th class="sort" data-sort="quantity_value" scope="col">Quantity</th>
|
||||
<th class="sort" data-sort="or_val" scope="col">Order Value</th>
|
||||
<th class="sort" data-sort="sort-avg_price" scope="col">Avg Price</th>
|
||||
<th class="sort" data-sort="sort-price" scope="col">Price</th>
|
||||
<th class="sort" data-sort="status" scope="col">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--end thead-->
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1641945600">02 Jan, 2022 <small class="text-muted">03:45PM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/btc.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Bitcoin (BTC)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-success">Buy</td>
|
||||
<td class="quantity_value">08</td>
|
||||
<td class="order_value or_val" data-orderval="370683.20">$3,70,683.20</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="46154.30">$46,154.30</td>
|
||||
<td class="price sort-price" data-price="46335.40">$46,335.40</td>
|
||||
<td class="status"><span class="badge badge-soft-success text-uppercase">Successful</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1640563200">27 Dec, 2021 <small class="text-muted">02:47PM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/eth.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Ethereum (ETH)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-danger">Sell</td>
|
||||
<td class="quantity_value">50</td>
|
||||
<td class="order_value or_val" data-orderval="187433.00">$1,87,433.00</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="3744.48">$3,744.48</td>
|
||||
<td class="price sort-price" data-price="3748.66">$3,748.66</td>
|
||||
<td class="status"><span class="badge badge-soft-danger text-uppercase">Cancelled</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1639872000">19 Dec, 2021 <small class="text-muted">10:24AM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/xmr.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Monero (XMR)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-danger">Sell</td>
|
||||
<td class="quantity_value">150</td>
|
||||
<td class="order_value or_val" data-orderval="33982.50">$33,982.50</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="227.30">$227.30</td>
|
||||
<td class="price sort-price" data-price="226.55">$226.55</td>
|
||||
<td class="status"><span class="badge badge-soft-success text-uppercase">Successful</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1639872000">19 Dec, 2021 <small class="text-muted">11:20AM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/mkr.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Maker (MKR)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-success">Buy</td>
|
||||
<td class="quantity_value">60</td>
|
||||
<td class="order_value or_val" data-orderval="143445.00">$1,43,445.00</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="2470.30">$2,470.30</td>
|
||||
<td class="price sort-price" data-price="2390.75">$2,390.75</td>
|
||||
<td class="status"><span class="badge badge-soft-warning text-uppercase">Pending</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1639180800">11 Dec, 2021 <small class="text-muted">02:47PM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/yfi.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Yearn.finance (YFI)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-success">Buy</td>
|
||||
<td class="quantity_value">25</td>
|
||||
<td class="order_value or_val" data-orderval="981906.00">$9,81,906.00</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="37632.17">$37,632.17</td>
|
||||
<td class="price sort-price" data-price="39276.24">$39,276.24</td>
|
||||
<td class="status"><span class="badge badge-soft-danger text-uppercase">Cancelled</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1638662400">05 Dec, 2021 <small class="text-muted">09:20AM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/mkr.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Maker (MKR)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-danger">Sell</td>
|
||||
<td class="quantity_value">20</td>
|
||||
<td class="order_value or_val" data-orderval="50243.00">$50,243.00</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="2324.65">$2,324.65</td>
|
||||
<td class="price sort-price" data-price="2512.15">$2,512.15</td>
|
||||
<td class="status"><span class="badge badge-soft-success text-uppercase">Successful</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1638057600">28 Nov, 2021 <small class="text-muted">11:42AM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/ltc.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Litecoin (LTC)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-success">Buy</td>
|
||||
<td class="quantity_value">200</td>
|
||||
<td class="order_value or_val" data-orderval="29500.00">$29,500.00</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="144.00">$144.00</td>
|
||||
<td class="price sort-price" data-price="147.50">$147.50</td>
|
||||
<td class="status"><span class="badge badge-soft-warning text-uppercase">Pending</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1634601600">19 Nov, 2021 <small class="text-muted">03:36PM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/xmr.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Monero (XMR)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-danger">Sell</td>
|
||||
<td class="quantity_value">75</td>
|
||||
<td class="order_value or_val" data-orderval="17874.00">$17,874.00</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="221.61">$221.61</td>
|
||||
<td class="price sort-price" data-price="238.32">$238.32</td>
|
||||
<td class="status"><span class="badge badge-soft-success text-uppercase">Successful</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1632700800">27 Oct, 2021 <small class="text-muted">03:36PM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/dash.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Dash (DASH)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-success">Buy</td>
|
||||
<td class="quantity_value">45</td>
|
||||
<td class="order_value or_val" data-orderval="14962.50">$14,962.50</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="147.39">$147.39</td>
|
||||
<td class="price sort-price" data-price="142.5">$142.5</td>
|
||||
<td class="status"><span class="badge badge-soft-danger text-uppercase">Cancelled</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1632700800">27 Oct, 2021 <small class="text-muted">03:36PM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/neo.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Neo
|
||||
(NEO)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-danger">Sell</td>
|
||||
<td class="quantity_value">36</td>
|
||||
<td class="order_value or_val" data-orderval="77232.24">$77,232.24</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="2274.21">$2,274.21</td>
|
||||
<td class="price sort-price" data-price="2145.34">$2,145.34</td>
|
||||
<td class="status"><span class="badge badge-soft-warning text-uppercase">Pending</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1632182400">21 Oct, 2021 <small class="text-muted">11:45AM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/mln.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Enzyme (MLN)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-danger">Sell</td>
|
||||
<td class="quantity_value">68</td>
|
||||
<td class="order_value or_val" data-orderval="6296.80">$6,296.80</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="94.21">$94.21</td>
|
||||
<td class="price sort-price" data-price="92.60">$92.60</td>
|
||||
<td class="status"><span class="badge badge-soft-success text-uppercase">Successful</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="order_date time" data-timestamp="1629763200">24 Sep, 2021 <small class="text-muted">02:32AM</small></td>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/eth.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="flex-grow-1 ms-2 currency_name">Ethereum (ETH)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="type text-success">Buy</td>
|
||||
<td class="quantity_value">72</td>
|
||||
<td class="order_value or_val" data-orderval="2696602.56">$2,69,602.56</td>
|
||||
<td class="avg_price sort-avg_price" data-av-price="3744.48">$3,744.48</td>
|
||||
<td class="price sort-price" data-price="3748.66">$3,748.66</td>
|
||||
<td class="status"><span class="badge badge-soft-danger text-uppercase">Cancelled</span></td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ orders We did not find any
|
||||
orders for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
<script src="/assets/js/pages/crypto-orders.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,548 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Transactions')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!--Swiper slider css-->
|
||||
<link href="/assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Transactions','Crypto')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-3 col-md-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<lord-icon src="https://cdn.lordicon.com/fhtaantg.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:55px;height:55px">
|
||||
</lord-icon>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="javascript:void(0);" class="badge badge-soft-warning badge-border">BTC</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-info badge-border">ETH</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary badge-border">USD</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-danger badge-border">EUR</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-2">$<span class="counter-value" data-target="74858">0</span><small class="text-muted fs-13">.68k</small></h4>
|
||||
<h6 class="text-muted mb-0">Available Balance (USD)</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-md-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<lord-icon src="https://cdn.lordicon.com/qhviklyi.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:55px;height:55px">
|
||||
</lord-icon>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="javascript:void(0);" class="badge badge-soft-warning badge-border">BTC</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-info badge-border">ETH</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary badge-border">USD</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-danger badge-border">EUR</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-2">$<span class="counter-value" data-target="74361">0</span><small class="text-muted fs-13">.34k</small></h4>
|
||||
<h6 class="text-muted mb-0">Send (Previous Month)</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-md-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<lord-icon src="https://cdn.lordicon.com/yeallgsa.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:55px;height:55px">
|
||||
</lord-icon>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="javascript:void(0);" class="badge badge-soft-warning badge-border">BTC</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-info badge-border">ETH</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary badge-border">USD</a>
|
||||
<a href="javascript:void(0);" class="badge badge-soft-danger badge-border">EUR</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-2">$<span class="counter-value" data-target="97685">0</span><small class="text-muted fs-13">.22k</small></h4>
|
||||
<h6 class="text-muted mb-0">Receive (Previous Month)</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-md-6">
|
||||
<div class="swiper default-swiper rounded">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="card card-animate overflow-hidden">
|
||||
<div class="card-body bg-soft-warning">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<lord-icon src="https://cdn.lordicon.com/vaeagfzc.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:55px;height:55px"></lord-icon>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="javascript:void(0);" class="fw-medium">Bitcoin (BTC)</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-2">$245<small class="text-muted fs-13">.65k</small></h4>
|
||||
<h6 class="text-muted mb-0">Send - Receive (Previous Month)</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card card-animate overflow-hidden">
|
||||
<div class="card-body bg-soft-warning">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<lord-icon src="https://cdn.lordicon.com/vaeagfzc.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:55px;height:55px"></lord-icon>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="javascript:void(0);" class="fw-medium">Ethereum (ETH)</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-2">$24<small class="text-muted fs-13">.74k</small></h4>
|
||||
<h6 class="text-muted mb-0">Send - Receive (Previous Month)</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card card-animate overflow-hidden">
|
||||
<div class="card-body bg-soft-warning">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<lord-icon src="https://cdn.lordicon.com/vaeagfzc.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:55px;height:55px"></lord-icon>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="javascript:void(0);" class="fw-medium">Monero (XMR)</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-2">$124<small class="text-muted fs-13">.36k</small></h4>
|
||||
<h6 class="text-muted mb-0">Send - Receive (Previous Month)</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end swiper-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row align-items-center mb-4 g-3">
|
||||
<div class="col-sm-3">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="text-muted flex-shrink-0">Sort by: </span>
|
||||
<select class="form-control mb-0" data-choices data-choices-search-false name="choices-single-default" id="choices-single-default">
|
||||
<option value="All" selected>All</option>
|
||||
<option value="USD">USD</option>
|
||||
<option value="ETH">ETH</option>
|
||||
<option value="BTC">BTC</option>
|
||||
<option value="EUR">EUR</option>
|
||||
<option value="JPY">JPY</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-sm-auto ms-auto">
|
||||
<div class="d-flex gap-2">
|
||||
<a href="javascript:void(0);" data-bs-toggle="modal" class="btn btn-success">Deposite</a>
|
||||
<a href="javascript:void(0);" data-bs-toggle="modal" class="btn btn-secondary">Withdraw</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="card" id="contactList">
|
||||
<div class="card-header">
|
||||
<div class="row align-items-center g-3">
|
||||
<div class="col-md-3">
|
||||
<h5 class="card-title mb-0">All Transactions</h5>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-md-auto ms-auto">
|
||||
<div class="d-flex gap-2">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for transactions...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
<button class="btn btn-soft-primary"><i class="ri-equalizer-line align-bottom me-1"></i>
|
||||
Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<!--end card-header-->
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table align-middle table-nowrap" id="customerTable">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th class="sort" data-sort="name" scope="col" style="width: 60px;"></th>
|
||||
<th class="sort" data-sort="date" scope="col">Timestamp</th>
|
||||
<th class="sort" data-sort="currency_name" scope="col">Currency</th>
|
||||
<th class="sort" data-sort="form_name" scope="col">Form</th>
|
||||
<th class="sort" data-sort="to_name" scope="col">To</th>
|
||||
<th class="sort" data-sort="details" scope="col">Details</th>
|
||||
<th class="sort" data-sort="transaction_id" scope="col">Transaction ID</th>
|
||||
<th class="sort" data-sort="type" scope="col">Type</th>
|
||||
<th class="sort" data-sort="amount" scope="col">Amount</th>
|
||||
<th class="sort" data-sort="status" scope="col">Status</th>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-danger text-danger rounded-circle fs-16">
|
||||
<i class="ri-arrow-right-up-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">24 Dec, 2021 <small class="text-muted">08:58AM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/btc.svg" alt="" class="avatar-xxs me-2"> BTC
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Wallet</td>
|
||||
<td class="to_name">Thomas Taylor</td>
|
||||
<td class="details">Membership Fees</td>
|
||||
<td class="transaction_id">16b1d9234b61e8778d9e3588f20</td>
|
||||
<td class="type">Withdraw</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 amount">-142.35 BTC</h6>
|
||||
<p class="text-muted mb-0">$697.88k</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-warning fs-11"><i class="ri-time-line align-bottom"></i> Processing</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ002</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-success text-success rounded-circle fs-16">
|
||||
<i class="ri-arrow-left-down-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">16 Dec, 2021 <small class="text-muted">10:32PM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/eth.svg" alt="" class="avatar-xxs me-2"> ETH
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Tonya Noble</td>
|
||||
<td class="to_name">Wallet</td>
|
||||
<td class="details">Spring Telephone Network</td>
|
||||
<td class="transaction_id">0a4b5e0e15d70ce79809eabbe</td>
|
||||
<td class="type">Deposit</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 amount">+342.35 ETH</h6>
|
||||
<p class="text-muted mb-0">$14565.35</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-success fs-11"><i class="ri-checkbox-circle-line align-bottom"></i> Success</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ003</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-success text-success rounded-circle fs-16">
|
||||
<i class="ri-arrow-left-down-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">04 Jan, 2022 <small class="text-muted">02:24AM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/eur.svg" alt="" class="avatar-xxs me-2"> EUR
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Nancy Martino</td>
|
||||
<td class="to_name">Wallet</td>
|
||||
<td class="details">Funding Purse with Payment Check</td>
|
||||
<td class="transaction_id">cca3da2b7711985361825f615e9</td>
|
||||
<td class="type">Deposit</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 amount">+174.23 EUR</h6>
|
||||
<p class="text-muted mb-0">$354.14</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-danger fs-11"><i class="ri-close-circle-line align-bottom"></i> Failed</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ004</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-danger text-danger rounded-circle fs-16">
|
||||
<i class="ri-arrow-right-up-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">28 Oct, 2021 <small class="text-muted">11:42AM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/gbp.svg" alt="" class="avatar-xxs me-2"> GBP
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Wallet</td>
|
||||
<td class="to_name">Michael Morris</td>
|
||||
<td class="details">British Pound Sterling Block</td>
|
||||
<td class="transaction_id">062e0e0123f2b1e9862f659c28</td>
|
||||
<td class="type">Withdraw</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 amount">-365.00 GBP</h6>
|
||||
<p class="text-muted mb-0">$7532.21</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-success fs-11"><i class="ri-checkbox-circle-line align-bottom"></i> Success</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ005</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-success text-success rounded-circle fs-16">
|
||||
<i class="ri-arrow-left-down-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">14 Nov, 2021 <small class="text-muted">12:38PM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/jpy.svg" alt="" class="avatar-xxs me-2"> JPY
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Alexis Clarke</td>
|
||||
<td class="to_name">Wallet</td>
|
||||
<td class="details">Platinum Business</td>
|
||||
<td class="transaction_id">1deffa9713917ee0af26bbb5f272</td>
|
||||
<td class="type">Deposit</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 amount">+341.74 JPY</h6>
|
||||
<p class="text-muted mb-0">$748.10</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-warning fs-11"><i class="ri-time-line align-bottom"></i> Processing</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ006</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-danger text-danger rounded-circle fs-16">
|
||||
<i class="ri-arrow-right-up-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">02 Jan, 2022 <small class="text-muted">08:58AM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/xrp.svg" alt="" class="avatar-xxs me-2"> XRP
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Wallet</td>
|
||||
<td class="to_name">Kevin Dawson</td>
|
||||
<td class="details">Business Advantage Fundaments - Banking</td>
|
||||
<td class="transaction_id">186aa96d8014061d994f025ac4</td>
|
||||
<td class="type">Withdraw</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 amount">-240.74 XRP</h6>
|
||||
<p class="text-muted mb-0">$3254.20</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-danger fs-11"><i class="ri-close-circle-line align-bottom"></i> Failed</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ007</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-success text-success rounded-circle fs-16">
|
||||
<i class="ri-arrow-left-down-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">17 Oct, 2021 <small class="text-muted">07:08PM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/ltc.svg" alt="" class="avatar-xxs me-2"> LTC
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Tonya Noble</td>
|
||||
<td class="to_name">Wallet</td>
|
||||
<td class="details">Litecoin Sale</td>
|
||||
<td class="transaction_id">c94b5581418c41c2c74448a5ec</td>
|
||||
<td class="type">Deposit</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 amount">+298.72 LTC</h6>
|
||||
<p class="text-muted mb-0">$149.32</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-success fs-11"><i class="ri-checkbox-circle-line align-bottom"></i> Success</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ008</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-danger text-danger rounded-circle fs-16">
|
||||
<i class="ri-arrow-right-up-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">27 Dec, 2021 <small class="text-muted">01:24PM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/xmr.svg" alt="" class="avatar-xxs me-2"> XMR
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Wallet</td>
|
||||
<td class="to_name">Mary Cousar</td>
|
||||
<td class="details">Monero Purchase</td>
|
||||
<td class="transaction_id">9a592451d1b0e0e5af6d4908f7</td>
|
||||
<td class="type">Withdraw</td>
|
||||
<td>
|
||||
<h6 class="text-danger amount mb-1">-365.13 XMR</h6>
|
||||
<p class="text-muted mb-0">$754.91</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-danger fs-11"><i class="ri-close-circle-line align-bottom"></i> Failed</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ009</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-success text-success rounded-circle fs-16">
|
||||
<i class="ri-arrow-left-down-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">23 Dec, 2021 <small class="text-muted">01:47AM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/xpm.svg" alt="" class="avatar-xxs me-2"> XPM
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Glen Matney</td>
|
||||
<td class="to_name">Wallet</td>
|
||||
<td class="details">British Pound Sterling Block</td>
|
||||
<td class="transaction_id">c1bf44fd100fff59a5c64c28dfe0</td>
|
||||
<td class="type">Deposit</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 amount">+174.09 XPM</h6>
|
||||
<p class="text-muted mb-0">$657.28</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-warning fs-11"><i class="ri-time-line align-bottom"></i> Processing</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ010</a></td>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-soft-success text-success rounded-circle fs-16">
|
||||
<i class="ri-arrow-left-down-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date">15 Dec, 2021 <small class="text-muted">08:58AM</small></td>
|
||||
<td class="currency_name">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/ppt.svg" alt="" class="avatar-xxs me-2"> PPT
|
||||
</div>
|
||||
</td>
|
||||
<td class="form_name">Timothy Smith</td>
|
||||
<td class="to_name">Wallet</td>
|
||||
<td class="details">British Pound Sterling Block</td>
|
||||
<td class="transaction_id">v98p141d5f4j145614sdsa78gh48t98</td>
|
||||
<td class="type">Withdraw</td>
|
||||
<td>
|
||||
<h6 class="text-danger amount mb-1">-142.35 PPT</h6>
|
||||
<p class="text-muted mb-0">$398.35</p>
|
||||
</td>
|
||||
<td class="status">
|
||||
<span class="badge badge-soft-success fs-11"><i class="ri-checkbox-circle-line align-bottom"></i> Success</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ transactions We did not find any
|
||||
transactions for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
<!--Swiper slider js-->
|
||||
<script src="/assets/libs/swiper/swiper-bundle.min.js"></script>
|
||||
<script src="/assets/js/pages/crypto-transactions.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,610 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('My Wallet')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<link href="/assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('My Wallet','Crypto')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-9">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="card-title mb-0">My Portfolio Statistics</h5>
|
||||
</div>
|
||||
<div class="toolbar d-flex align-items-start justify-content-center flex-wrap gap-2">
|
||||
<button type="button" class="btn btn-soft-success timeline-btn btn-sm" id="one_month">
|
||||
1M
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-success timeline-btn btn-sm" id="six_months">
|
||||
6M
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-success timeline-btn btn-sm" id="one_year">
|
||||
1Y
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-secondary timeline-btn btn-sm active" id="all">
|
||||
ALL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="area_chart_datetime" data-colors='["--vz-primary"]' class="apex-charts" dir="ltr"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mb-0">Watchlist</h5>
|
||||
</div>
|
||||
<div class="flexshrink-0">
|
||||
<button class="btn btn-primary btn-sm"><i class="ri-star-line align-bottom"></i> Add Watchlist</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper cryptoSlider">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-end">
|
||||
<div class="dropdown">
|
||||
<a class="text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="text-muted fs-18"><i class="mdi mdi-dots-horizontal"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">View Details</a>
|
||||
<a class="dropdown-item" href="#">Remove Watchlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/btc.svg" class="bg-light rounded-circle p-1 avatar-xs img-fluid" alt="">
|
||||
<h6 class="ms-2 mb-0 fs-14">Bitcoin</h6>
|
||||
</div>
|
||||
<div class="row align-items-end g-0">
|
||||
<div class="col-6">
|
||||
<h5 class="mb-1 mt-4">$46,335.40</h5>
|
||||
<p class="text-success fs-13 fw-medium mb-0">+0.63%<span class="text-muted ms-2 fs-10">(BTC)</span></p>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="apex-charts crypto-widget" data-colors='["--vz-success" , "--vz-transparent"]' id="bitcoin_sparkline_charts" dir="ltr"></div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-end">
|
||||
<div class="dropdown">
|
||||
<a class="text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="text-muted fs-18"><i class="mdi mdi-dots-horizontal"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">View Details</a>
|
||||
<a class="dropdown-item" href="#">Remove Watchlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/ltc.svg" class="bg-light rounded-circle p-1 avatar-xs img-fluid" alt="">
|
||||
<h6 class="ms-2 mb-0 fs-14">Litecoin</h6>
|
||||
</div>
|
||||
<div class="row align-items-end g-0">
|
||||
<div class="col-6">
|
||||
<h5 class="mb-1 mt-4">$65.64</h5>
|
||||
<p class="text-danger fs-13 fw-medium mb-0">-3.42%<span class="text-muted ms-2 fs-10">(LTC)</span></p>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="apex-charts crypto-widget" data-colors='["--vz-danger", "--vz-transparent"]' id="litecoin_sparkline_charts" dir="ltr"></div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-end">
|
||||
<div class="dropdown">
|
||||
<a class="text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="text-muted fs-18"><i class="mdi mdi-dots-horizontal"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">View Details</a>
|
||||
<a class="dropdown-item" href="#">Remove Watchlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/eth.svg" class="bg-light rounded-circle p-1 avatar-xs img-fluid" alt="">
|
||||
<h6 class="ms-2 mb-0 fs-14">Ethereum</h6>
|
||||
</div>
|
||||
<div class="row align-items-end g-0">
|
||||
<div class="col-6">
|
||||
<h5 class="mb-1 mt-4">$3,748.66</h5>
|
||||
<p class="text-danger fs-13 fw-medium mb-0">+0.42%<span class="text-muted ms-2 fs-10">(ETH)</span></p>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="apex-charts crypto-widget" data-colors='["--vz-danger", "--vz-transparent"]' id="eathereum_sparkline_charts" dir="ltr"></div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-end">
|
||||
<div class="dropdown">
|
||||
<a class="text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="text-muted fs-18"><i class="mdi mdi-dots-horizontal"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">View Details</a>
|
||||
<a class="dropdown-item" href="#">Remove Watchlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/xmr.svg" class="bg-light rounded-circle p-1 avatar-xs img-fluid" alt="">
|
||||
<h6 class="ms-2 mb-0 fs-14">Monero</h6>
|
||||
</div>
|
||||
<div class="row align-items-end g-0">
|
||||
<div class="col-6">
|
||||
<h5 class="mb-1 mt-4">$226.55</h5>
|
||||
<p class="text-danger fs-13 fw-medium mb-0">-1.92%<span class="text-muted ms-2 fs-10">(XMR)</span></p>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="apex-charts crypto-widget" data-colors='["--vz-danger", "--vz-transparent"]' id="binance_sparkline_charts" dir="ltr"></div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-end">
|
||||
<div class="dropdown">
|
||||
<a class="text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="text-muted fs-18"><i class="mdi mdi-dots-horizontal"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">View Details</a>
|
||||
<a class="dropdown-item" href="#">Remove Watchlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/dash.svg" class="bg-light rounded-circle p-1 avatar-xs img-fluid" alt="">
|
||||
<h6 class="ms-2 mb-0 fs-14">Dash</h6>
|
||||
</div>
|
||||
<div class="row align-items-end g-0">
|
||||
<div class="col-6">
|
||||
<h5 class="mb-1 mt-4">$142.5</h5>
|
||||
<p class="text-success fs-13 fw-medium mb-0">+16.38%<span class="text-muted ms-2 fs-10">(DASH)</span></p>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="apex-charts crypto-widget" data-colors='["--vz-success", "--vz-transparent"]' id="dash_sparkline_charts" dir="ltr"></div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-end">
|
||||
<div class="dropdown">
|
||||
<a class="text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="text-muted fs-18"><i class="mdi mdi-dots-horizontal"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">View Details</a>
|
||||
<a class="dropdown-item" href="#">Remove Watchlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/mkr.svg" class="bg-light rounded-circle p-1 avatar-xs img-fluid" alt="">
|
||||
<h6 class="ms-2 mb-0 fs-14">Maker</h6>
|
||||
</div>
|
||||
<div class="row align-items-end g-0">
|
||||
<div class="col-6">
|
||||
<h5 class="mb-1 mt-4">$2,390.75</h5>
|
||||
<p class="text-success fs-13 fw-medium mb-0">+0.36%<span class="text-muted ms-2 fs-10">(MKR)</span></p>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="apex-charts crypto-widget" data-colors='["--vz-success", "--vz-transparent"]' id="tether_sparkline_charts" dir="ltr"></div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-end">
|
||||
<div class="dropdown">
|
||||
<a class="text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="text-muted fs-18"><i class="mdi mdi-dots-horizontal"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">View Details</a>
|
||||
<a class="dropdown-item" href="#">Remove Watchlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svg/crypto-icons/neo.svg" class="bg-light rounded-circle p-1 avatar-xs img-fluid" alt="">
|
||||
<h6 class="ms-2 mb-0 fs-14">Neo</h6>
|
||||
</div>
|
||||
<div class="row align-items-end g-0">
|
||||
<div class="col-6">
|
||||
<h5 class="mb-1 mt-4">$2,145.65</h5>
|
||||
<p class="text-success fs-13 fw-medium mb-0">32.07%<span class="text-muted ms-2 fs-10">(NEO)</span></p>
|
||||
</div><!-- end col -->
|
||||
<div class="col-6">
|
||||
<div class="apex-charts crypto-widget" data-colors='["--vz-success", "--vz-transparent"]' id="neo_sparkline_charts" dir="ltr"></div>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end -->
|
||||
</div><!-- end swiper wrapper -->
|
||||
</div><!-- end swiper -->
|
||||
|
||||
<div class="card" id="marketList">
|
||||
<div class="card-header border-bottom-dashed d-flex align-items-center">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Market Status</h4>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary btn-sm">Today</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm">Overall</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table align-middle table-nowrap" id="customerTable">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th class="sort" data-sort="currency_name" scope="col">Name</th>
|
||||
<th class="sort" data-sort="quantity_value" scope="col">Quantity</th>
|
||||
<th class="sort" data-sort="avg_price" scope="col">Avg. Price</th>
|
||||
<th class="sort" data-sort="current_value" scope="col">Current Value</th>
|
||||
<th class="sort" data-sort="returns" scope="col">Returns</th>
|
||||
<th class="sort" data-sort="returns_per" scope="col">Returns %</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!--end thead-->
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/btc.svg" alt="" class="avatar-xxs me-2" />
|
||||
<a href="javascript:void(0)" class="currency_name text-reset">Bitcoin (BTC)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="quantity_value">08</td>
|
||||
<td class="avg_price">$46,154.30</td>
|
||||
<td class="current_value">$46,335.40</td>
|
||||
<td class="returns">$3,70,683.2</td>
|
||||
<td class="returns_per">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>0.63%</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ002</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/eth.svg" alt="" class="avatar-xxs me-2" />
|
||||
<a href="javascript:void(0)" class="currency_name text-reset">Ethereum (ETH)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="quantity_value">50</td>
|
||||
<td class="avg_price">$3,744.48</td>
|
||||
<td class="current_value">$3,748.66</td>
|
||||
<td class="returns">$1,87,433</td>
|
||||
<td class="returns_per">
|
||||
<h6 class="text-danger fs-13 mb-0"><i class="mdi mdi-trending-down align-middle me-1"></i>3.42%</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ003</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/xrp.svg" alt="" class="avatar-xxs me-2" />
|
||||
<a href="javascript:void(0)" class="currency_name text-reset">Ripple (XRP)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="quantity_value">300</td>
|
||||
<td class="avg_price">$1.05</td>
|
||||
<td class="current_value">$2.20</td>
|
||||
<td class="returns">$660</td>
|
||||
<td class="returns_per">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>1.20%</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ004</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/xmr.svg" alt="" class="avatar-xxs me-2" />
|
||||
<a href="javascript:void(0)" class="currency_name text-reset">Monero (XMR)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="quantity_value">150</td>
|
||||
<td class="avg_price">$227.30</td>
|
||||
<td class="current_value">$226.55</td>
|
||||
<td class="returns">$33,982.5</td>
|
||||
<td class="returns_per">
|
||||
<h6 class="text-danger fs-13 mb-0"><i class="mdi mdi-trending-down align-middle me-1"></i>1.92%</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ005</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/ltc.svg" alt="" class="avatar-xxs me-2" />
|
||||
<a href="javascript:void(0)" class="currency_name text-reset">Litecoin (LTC)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="quantity_value">200</td>
|
||||
<td class="avg_price">$144.00</td>
|
||||
<td class="current_value">$147.50</td>
|
||||
<td class="returns">$29,500</td>
|
||||
<td class="returns_per">
|
||||
<h6 class="text-danger fs-13 mb-0"><i class="mdi mdi-trending-down align-middle me-1"></i>0.87%</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ008</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/aave.svg" alt="" class="avatar-xxs me-2" />
|
||||
<a href="javascript:void(0)" class="currency_name text-reset">Aave (AAVE)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="quantity_value">180</td>
|
||||
<td class="avg_price">$250.70</td>
|
||||
<td class="current_value">$254.30</td>
|
||||
<td class="returns">$45,774</td>
|
||||
<td class="returns_per">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>3.96%</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ006</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/mkr.svg" alt="" class="avatar-xxs me-2" />
|
||||
<a href="javascript:void(0)" class="currency_name text-reset">Maker (MKR)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="quantity_value">60</td>
|
||||
<td class="avg_price">$2,470.30</td>
|
||||
<td class="current_value">$2,390.75</td>
|
||||
<td class="returns">$1,43,445</td>
|
||||
<td class="returns_per">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>0.36%</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ007</a></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center fw-medium">
|
||||
<img src="/assets/images/svg/crypto-icons/yfi.svg" alt="" class="avatar-xxs me-2" />
|
||||
<a href="javascript:void(0)" class="currency_name text-reset">Yearn.finance (YFI)</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="quantity_value">25</td>
|
||||
<td class="avg_price">$37,632.17</td>
|
||||
<td class="current_value">$39,276.24</td>
|
||||
<td class="returns">$9,81,906</td>
|
||||
<td class="returns_per">
|
||||
<h6 class="text-success fs-13 mb-0"><i class="mdi mdi-trending-up align-middle me-1"></i>3.96%</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ Currencies We did not find any Currencies for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-3">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-body bg-soft-primary">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-3">My Portfolio</h5>
|
||||
<h4>$61,91,967<small class="text-muted fs-14">.29</small></h4>
|
||||
<p class="text-muted mb-0">$25,10,974 <small class="badge badge-soft-success"><i class="ri-arrow-right-up-line fs-13 align-bottom"></i>4.37%</small></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<i class="mdi mdi-wallet-outline text-primary fs-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-3">Today's Profit</h5>
|
||||
<h4>$2,74,365<small class="text-muted fs-14">.84</small></h4>
|
||||
<p class="text-muted mb-0">$9,10,564 <small class="badge badge-soft-success"><i class="ri-arrow-right-up-line fs-13 align-bottom"></i>1.25%</small></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<i class="ri-hand-coin-line text-primary fs-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-3">Overall Profit</h5>
|
||||
<h4>$32,67,120<small class="text-muted fs-14">.42</small></h4>
|
||||
<p class="text-muted mb-0">$18,22,730 <small class="badge badge-soft-success"><i class="ri-arrow-right-up-line fs-13 align-bottom"></i>8.34%</small></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<i class="ri-line-chart-line text-primary fs-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Recent Transaction</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/btc.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="mb-1">Bitcoin (BTC)</h6>
|
||||
<p class="text-muted mb-0">Today</p>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-danger mb-0">- $422.89</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/ltc.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="mb-1">Litecoin (LTC)</h6>
|
||||
<p class="text-muted mb-0">Yesterday</p>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-success mb-0">+ $784.20</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/xmr.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="mb-1">Monero (XMR)</h6>
|
||||
<p class="text-muted mb-0">01 Jan, 2022</p>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-danger mb-0">- $356.74</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/fil.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="mb-1">Filecoin (FIL)</h6>
|
||||
<p class="text-muted mb-0">30 Dec, 2021</p>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-success mb-0">+ $1,247.00</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/svg/crypto-icons/dot.svg" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="mb-1">Polkadot (DOT)</h6>
|
||||
<p class="text-muted mb-0">27 Dec, 2021</p>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-success btn mb-0">+ $7,365.80</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/apps-crypto-transactions" class="btn btn-soft-secondary w-100">View All Transactions <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- Swiper Js -->
|
||||
<script src="/assets/libs/swiper/swiper-bundle.min.js"></script>
|
||||
<script src="/assets/js/pages/crypto-wallet.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,352 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Create Product')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Plugins css -->
|
||||
<link href="/assets/libs/dropzone/dropzone.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Create Product','Ecommerce')"></div>
|
||||
|
||||
<form id="createproduct-form" autocomplete="off" class="needs-validation" novalidate>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="product-title-input">Product Title</label>
|
||||
<input type="hidden" class="form-control" id="formAction" name="formAction" value="add">
|
||||
<input type="text" class="form-control d-none" id="product-id-input">
|
||||
<input type="text" class="form-control" id="product-title-input" value="" placeholder="Enter product title" required>
|
||||
<div class="invalid-feedback">Please Enter a product title.</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Product Description</label>
|
||||
|
||||
<div id="ckeditor-classic">
|
||||
<p>Tommy Hilfiger men striped pink sweatshirt. Crafted with cotton. Material
|
||||
composition is 100% organic cotton. This is one of the world’s leading designer
|
||||
lifestyle brands and is internationally recognized for celebrating the essence
|
||||
of classic American cool style, featuring preppy with a twist designs.</p>
|
||||
<ul>
|
||||
<li>Full Sleeve</li>
|
||||
<li>Cotton</li>
|
||||
<li>All Sizes available</li>
|
||||
<li>4 Different Color</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Product Gallery</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-4">
|
||||
<h5 class="fs-14 mb-1">Product Image</h5>
|
||||
<p class="text-muted">Add Product main Image.</p>
|
||||
<div class="text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="position-absolute top-100 start-100 translate-middle">
|
||||
<label for="product-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
|
||||
<i class="ri-image-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input class="form-control d-none" value="" id="product-image-input" type="file" accept="image/png, image/gif, image/jpeg">
|
||||
</div>
|
||||
<div class="avatar-lg">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="" id="product-img" class="avatar-md h-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="fs-14 mb-1">Product Gallery</h5>
|
||||
<p class="text-muted">Add Product Gallery Images.</p>
|
||||
|
||||
<div class="dropzone">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" multiple="multiple">
|
||||
</div>
|
||||
<div class="dz-message needsclick">
|
||||
<div class="mb-3">
|
||||
<i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
|
||||
</div>
|
||||
|
||||
<h5>Drop files here or click to upload.</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled mb-0" id="dropzone-preview">
|
||||
<li class="mt-2" id="dropzone-preview-list">
|
||||
<!-- This is used as the file preview template -->
|
||||
<div class="border rounded">
|
||||
<div class="d-flex p-2">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm bg-light rounded">
|
||||
<img data-dz-thumbnail class="img-fluid rounded d-block" src="#" alt="Product-Image" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="pt-1">
|
||||
<h5 class="fs-14 mb-1" data-dz-name> </h5>
|
||||
<p class="fs-13 text-muted mb-0" data-dz-size></p>
|
||||
<strong class="error text-danger" data-dz-errormessage></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-3">
|
||||
<button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end dropzon-preview -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs-custom card-header-tabs border-bottom-0" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#addproduct-general-info" role="tab">
|
||||
General Info
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#addproduct-metadata" role="tab">
|
||||
Meta Data
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end card header -->
|
||||
<div class="card-body">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="addproduct-general-info" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="manufacturer-name-input">Manufacturer
|
||||
Name</label>
|
||||
<input type="text" class="form-control" id="manufacturer-name-input" placeholder="Enter manufacturer name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="manufacturer-brand-input">Manufacturer
|
||||
Brand</label>
|
||||
<input type="text" class="form-control" id="manufacturer-brand-input" placeholder="Enter manufacturer brand">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="stocks-input">Stocks</label>
|
||||
<input type="text" class="form-control" id="stocks-input" placeholder="Stocks" required>
|
||||
<div class="invalid-feedback">Please Enter a product stocks.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="product-price-input">Price</label>
|
||||
<div class="input-group has-validation mb-3">
|
||||
<span class="input-group-text" id="product-price-addon">$</span>
|
||||
<input type="text" class="form-control" id="product-price-input" placeholder="Enter price" aria-label="Price" aria-describedby="product-price-addon" required>
|
||||
<div class="invalid-feedback">Please Enter a product price.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="product-discount-input">Discount</label>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="product-discount-addon">%</span>
|
||||
<input type="text" class="form-control" id="product-discount-input" placeholder="Enter discount" aria-label="discount" aria-describedby="product-discount-addon">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="orders-input">Orders</label>
|
||||
<input type="text" class="form-control" id="orders-input" placeholder="Orders" required>
|
||||
<div class="invalid-feedback">Please Enter a product orders.</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end tab-pane -->
|
||||
|
||||
<div class="tab-pane" id="addproduct-metadata" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="meta-title-input">Meta title</label>
|
||||
<input type="text" class="form-control" placeholder="Enter meta title" id="meta-title-input">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="meta-keywords-input">Meta
|
||||
Keywords</label>
|
||||
<input type="text" class="form-control" placeholder="Enter meta keywords" id="meta-keywords-input">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div>
|
||||
<label class="form-label" for="meta-description-input">Meta Description</label>
|
||||
<textarea class="form-control" id="meta-description-input" placeholder="Enter meta description" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
</div>
|
||||
<!-- end tab content -->
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
<div class="text-end mb-3">
|
||||
<button type="submit" class="btn btn-primary w-sm">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Publish</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="choices-publish-status-input" class="form-label">Status</label>
|
||||
|
||||
<select class="form-select" id="choices-publish-status-input" data-choices data-choices-search-false>
|
||||
<option value="Published" selected>Published</option>
|
||||
<option value="Scheduled">Scheduled</option>
|
||||
<option value="Draft">Draft</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="choices-publish-visibility-input" class="form-label">Visibility</label>
|
||||
<select class="form-select" id="choices-publish-visibility-input" data-choices data-choices-search-false>
|
||||
<option value="Public" selected>Public</option>
|
||||
<option value="Hidden">Hidden</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Publish Schedule</h5>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<label for="datepicker-publish-input" class="form-label">Publish Date & Time</label>
|
||||
<input type="text" id="datepicker-publish-input" class="form-control" placeholder="Enter publish date" data-provider="flatpickr" data-date-format="d.m.y" data-enable-time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Product Categories</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-2"> <a href="#" class="float-end text-decoration-underline">Add
|
||||
New</a>Select product category</p>
|
||||
<select class="form-select" id="choices-category-input" name="choices-category-input" data-choices data-choices-search-false>
|
||||
<option value="Appliances">Appliances</option>
|
||||
<option value="Automotive Accessories">Automotive Accessories</option>
|
||||
<option value="Electronics">Electronics</option>
|
||||
<option value="Fashion">Fashion</option>
|
||||
<option value="Furniture">Furniture</option>
|
||||
<option value="Grocery">Grocery</option>
|
||||
<option value="Kids">Kids</option>
|
||||
<option value="Watches">Watches</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Product Tags</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="hstack gap-3 align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<input class="form-control" data-choices data-choices-multiple-remove="true" placeholder="Enter tags" type="text" value="Cotton" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Product Short Description</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-2">Add short description for product</p>
|
||||
<textarea class="form-control" placeholder="Must enter minimum of a 100 characters" rows="3"></textarea>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- ckeditor -->
|
||||
<script src="/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
|
||||
|
||||
<!-- dropzone js -->
|
||||
<script src="/assets/libs/dropzone/dropzone-min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/ecommerce-product-create.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,322 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Shopping Cart')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Shopping Cart','Ecommerce')"></div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-xl-8">
|
||||
<div class="row align-items-center gy-3 mb-3">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<h5 class="fs-14 mb-0">Your Cart (03 items)</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<a href="/apps-ecommerce-products" class="link-primary text-decoration-underline">Continue
|
||||
Shopping</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card product">
|
||||
<div class="card-body">
|
||||
<div class="row gy-3">
|
||||
<div class="col-sm-auto">
|
||||
<div class="avatar-lg bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-8.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<h5 class="fs-14 text-truncate"><a href="/apps-ecommerce-product-details"
|
||||
class="text-dark">Sweatshirt for Men (Pink)</a></h5>
|
||||
<ul class="list-inline text-muted">
|
||||
<li class="list-inline-item">Color : <span class="fw-medium">Pink</span></li>
|
||||
<li class="list-inline-item">Size : <span class="fw-medium">M</span></li>
|
||||
</ul>
|
||||
|
||||
<div class="input-step">
|
||||
<button type="button" class="minus">–</button>
|
||||
<input type="number" class="product-quantity" value="2" min="0" max="100">
|
||||
<button type="button" class="plus">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="text-lg-end">
|
||||
<p class="text-muted mb-1">Item Price:</p>
|
||||
<h5 class="fs-14">$<span id="ticket_price" class="product-price">119.99</span></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card body -->
|
||||
<div class="card-footer">
|
||||
<div class="row align-items-center gy-3">
|
||||
<div class="col-sm">
|
||||
<div class="d-flex flex-wrap my-n1">
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal"
|
||||
data-bs-target="#removeItemModal"><i
|
||||
class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Remove</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2"><i
|
||||
class="ri-star-fill text-muted align-bottom me-1"></i> Add Wishlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<div>Total :</div>
|
||||
<h5 class="fs-14 mb-0">$<span class="product-line-price">239.98</span></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card footer -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card product">
|
||||
<div class="card-body">
|
||||
<div class="row gy-3">
|
||||
<div class="col-sm-auto">
|
||||
<div class="avatar-lg bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-7.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<h5 class="fs-14 text-truncate"><a href="/apps-ecommerce-product-details"
|
||||
class="text-dark">Noise NoiseFit Endure Smart Watch</a></h5>
|
||||
|
||||
<ul class="list-inline text-muted">
|
||||
<li class="list-inline-item">Color : <span class="fw-medium">Black</span></li>
|
||||
<li class="list-inline-item">Size : <span class="fw-medium">32.5mm</span></li>
|
||||
</ul>
|
||||
|
||||
<div class="input-step">
|
||||
<button type="button" class="minus">–</button>
|
||||
<input type="number" class="product-quantity" value="1" min="0" max="100">
|
||||
<button type="button" class="plus">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="text-lg-end">
|
||||
<p class="text-muted mb-1">Item Price:</p>
|
||||
<h5 class="fs-14">$<span class="product-price">94.99</span></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card body -->
|
||||
<div class="card-footer">
|
||||
<div class="row align-items-center gy-3">
|
||||
<div class="col-sm">
|
||||
<div class="d-flex flex-wrap my-n1">
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal"
|
||||
data-bs-target="#removeItemModal"><i
|
||||
class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Remove</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2"><i
|
||||
class="ri-star-fill text-muted align-bottom me-1"></i> Add Wishlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<div>Total :</div>
|
||||
<h5 class="fs-14 mb-0">$<span class="product-line-price">94.99</span></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card footer -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card product">
|
||||
<div class="card-body">
|
||||
<div class="row gy-3">
|
||||
<div class="col-sm-auto">
|
||||
<div class="avatar-lg bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-3.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<h5 class="fs-14 text-truncate"><a href="/apps-ecommerce-product-details"
|
||||
class="text-dark">350 ml Glass Grocery Container</a></h5>
|
||||
|
||||
<ul class="list-inline text-muted">
|
||||
<li class="list-inline-item">Color : <span class="fw-medium">White</span></li>
|
||||
<li class="list-inline-item">Size : <span class="fw-medium">350 ml</span></li>
|
||||
</ul>
|
||||
|
||||
<div class="input-step">
|
||||
<button type="button" class="minus">–</button>
|
||||
<input type="number" class="product-quantity" value="1" min="0" max="100">
|
||||
<button type="button" class="plus">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="text-lg-end">
|
||||
<p class="text-muted mb-1">Item Price:</p>
|
||||
<h5 class="fs-14">$<span class="product-price">24.99</span></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card body -->
|
||||
<div class="card-footer">
|
||||
<div class="row align-items-center gy-3">
|
||||
<div class="col-sm">
|
||||
<div class="d-flex flex-wrap my-n1">
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal"
|
||||
data-bs-target="#removeItemModal"><i
|
||||
class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Remove</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2"><i
|
||||
class="ri-star-fill text-muted align-bottom me-1"></i> Add Wishlist</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<div>Total :</div>
|
||||
<h5 class="fs-14 mb-0">$<span class="product-line-price">24.99</span></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card footer -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
|
||||
<div class="text-end mb-4">
|
||||
<a href="/apps-ecommerce-checkout" class="btn btn-secondary btn-label right ms-auto"><i
|
||||
class="ri-arrow-right-line label-icon align-bottom fs-16 ms-2"></i> Checkout</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4">
|
||||
<div class="sticky-side-div">
|
||||
<div class="card">
|
||||
<div class="card-header border-bottom-dashed">
|
||||
<h5 class="card-title mb-0">Order Summary</h5>
|
||||
</div>
|
||||
<div class="card-header bg-soft-light border-bottom-dashed">
|
||||
<div class="text-center">
|
||||
<h6 class="mb-2">Have a <span class="fw-semibold">promo</span> code ?</h6>
|
||||
</div>
|
||||
<div class="hstack gap-3 px-3 mx-n3">
|
||||
<input class="form-control me-auto" type="text" placeholder="Enter coupon code"
|
||||
aria-label="Add Promo Code here...">
|
||||
<button type="button" class="btn btn-primary w-xs">Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-2">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sub Total :</td>
|
||||
<td class="text-end" id="cart-subtotal">$ 359.96</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Discount <span class="text-muted">(VELZON15)</span> : </td>
|
||||
<td class="text-end" id="cart-discount">- $ 53.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shipping Charge :</td>
|
||||
<td class="text-end" id="cart-shipping">$ 65.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estimated Tax (12.5%) : </td>
|
||||
<td class="text-end" id="cart-tax">$ 44.99</td>
|
||||
</tr>
|
||||
<tr class="table-active">
|
||||
<th>Total (USD) :</th>
|
||||
<td class="text-end">
|
||||
<span class="fw-semibold" id="cart-total">
|
||||
$415.96
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- end table-responsive -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert border-dashed alert-danger" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/nkmsrxys.json" trigger="loop"
|
||||
colors="primary:#121331,secondary:#f06548" style="width:80px;height:80px"></lord-icon>
|
||||
<div class="ms-2">
|
||||
<h5 class="fs-14 text-danger fw-semibold"> Buying for a loved one?</h5>
|
||||
<p class="text-black mb-1">Gift wrap and personalised message on card, <br />Only for
|
||||
<span class="fw-semibold">$9.99</span> USD </p>
|
||||
<button type="button" class="btn ps-0 btn-sm btn-link text-danger text-uppercase">Add
|
||||
Gift Wrap</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end stickey -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
<!-- removeItemModal -->
|
||||
<div id="removeItemModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure You want to remove this Product ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="remove-product">Yes, Delete It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- input step init -->
|
||||
<script src="/assets/js/pages/form-input-spin.init.js"></script>
|
||||
|
||||
<!-- ecommerce cart js -->
|
||||
<script src="/assets/js/pages/ecommerce-cart.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,547 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Checkout')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Checkout','Ecommerce')"></div>
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body checkout-tab">
|
||||
|
||||
<form action="#">
|
||||
<div class="step-arrow-nav mt-n3 mx-n3 mb-3">
|
||||
|
||||
<ul class="nav nav-pills nav-justified custom-nav" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fs-15 p-3 active" id="pills-bill-info-tab" data-bs-toggle="pill" data-bs-target="#pills-bill-info" type="button" role="tab" aria-controls="pills-bill-info" aria-selected="true">
|
||||
<i class="ri-user-2-line fs-16 p-2 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
|
||||
Personal Info
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fs-15 p-3" id="pills-bill-address-tab" data-bs-toggle="pill" data-bs-target="#pills-bill-address" type="button" role="tab" aria-controls="pills-bill-address" aria-selected="false">
|
||||
<i class="ri-truck-line fs-16 p-2 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
|
||||
Shipping Info
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fs-15 p-3" id="pills-payment-tab" data-bs-toggle="pill" data-bs-target="#pills-payment" type="button" role="tab" aria-controls="pills-payment" aria-selected="false">
|
||||
<i class="ri-bank-card-line fs-16 p-2 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
|
||||
Payment Info
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fs-15 p-3" id="pills-finish-tab" data-bs-toggle="pill" data-bs-target="#pills-finish" type="button" role="tab" aria-controls="pills-finish" aria-selected="false">
|
||||
<i class="ri-checkbox-circle-line fs-16 p-2 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
|
||||
Finish
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="pills-bill-info" role="tabpanel" aria-labelledby="pills-bill-info-tab">
|
||||
<div>
|
||||
<h5 class="mb-1">Billing Information</h5>
|
||||
<p class="text-muted mb-4">Please fill all information below</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="billinginfo-firstName" class="form-label">First
|
||||
Name</label>
|
||||
<input type="text" class="form-control" id="billinginfo-firstName" placeholder="Enter first name" value="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="billinginfo-lastName" class="form-label">Last
|
||||
Name</label>
|
||||
<input type="text" class="form-control" id="billinginfo-lastName" placeholder="Enter last name" value="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="billinginfo-email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
|
||||
<input type="email" class="form-control" id="billinginfo-email" placeholder="Enter email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="billinginfo-phone" class="form-label">Phone</label>
|
||||
<input type="text" class="form-control" id="billinginfo-phone" placeholder="Enter phone no.">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="billinginfo-address" class="form-label">Address</label>
|
||||
<textarea class="form-control" id="billinginfo-address" placeholder="Enter address" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="country" class="form-label">Country</label>
|
||||
<select class="form-select" id="country" data-plugin="choices">
|
||||
<option value="">Select Country...</option>
|
||||
<option selected>United States</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="state" class="form-label">State</label>
|
||||
<select class="form-select" id="state" data-plugin="choices">
|
||||
<option value="">Select State...</option>
|
||||
<option value="Alabama">Alabama</option>
|
||||
<option value="Alaska">Alaska</option>
|
||||
<option value="American Samoa">American Samoa</option>
|
||||
<option value="California" selected>California</option>
|
||||
<option value="Colorado">Colorado</option>
|
||||
<option value="District Of Columbia">District Of Columbia
|
||||
</option>
|
||||
<option value="Florida">Florida</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Guam">Guam</option>
|
||||
<option value="Hawaii">Hawaii</option>
|
||||
<option value="Idaho">Idaho</option>
|
||||
<option value="Kansas">Kansas</option>
|
||||
<option value="Louisiana">Louisiana</option>
|
||||
<option value="Montana">Montana</option>
|
||||
<option value="Nevada">Nevada</option>
|
||||
<option value="New Jersey">New Jersey</option>
|
||||
<option value="New Mexico">New Mexico</option>
|
||||
<option value="New York">New York</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="zip" class="form-label">Zip Code</label>
|
||||
<input type="text" class="form-control" id="zip" placeholder="Enter zip code">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-start gap-3 mt-3">
|
||||
<button type="button" class="btn btn-secondary btn-label right ms-auto nexttab" data-nexttab="pills-bill-address-tab">
|
||||
<i class="ri-truck-line label-icon align-middle fs-16 ms-2"></i>Proceed
|
||||
to Shipping
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
|
||||
<div class="tab-pane fade" id="pills-bill-address" role="tabpanel" aria-labelledby="pills-bill-address-tab">
|
||||
<div>
|
||||
<h5 class="mb-1">Shipping Information</h5>
|
||||
<p class="text-muted mb-4">Please fill all information below</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Saved Address</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-sm btn-info mb-3" data-bs-toggle="modal" data-bs-target="#addAddressModal">
|
||||
Add Address
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gy-3">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div class="form-check card-radio">
|
||||
<input id="shippingAddress01" name="shippingAddress" type="radio" class="form-check-input" checked>
|
||||
<label class="form-check-label" for="shippingAddress01">
|
||||
<span class="mb-4 fw-semibold d-block text-muted text-uppercase">Home
|
||||
Address</span>
|
||||
|
||||
<span class="fs-14 mb-2 d-block">Marcus Alfaro</span>
|
||||
<span class="text-muted fw-normal text-wrap mb-1 d-block">4739
|
||||
Bubby Drive Austin, TX 78729</span>
|
||||
<span class="text-muted fw-normal d-block">Mo.
|
||||
012-345-6789</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap p-2 py-1 bg-light rounded-bottom border mt-n1">
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal" data-bs-target="#addAddressModal"><i class="ri-pencil-fill text-muted align-bottom me-1"></i>
|
||||
Edit</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill text-muted align-bottom me-1"></i>
|
||||
Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div class="form-check card-radio">
|
||||
<input id="shippingAddress02" name="shippingAddress" type="radio" class="form-check-input">
|
||||
<label class="form-check-label" for="shippingAddress02">
|
||||
<span class="mb-4 fw-semibold d-block text-muted text-uppercase">Office
|
||||
Address</span>
|
||||
|
||||
<span class="fs-14 mb-2 d-block">James Honda</span>
|
||||
<span class="text-muted fw-normal text-wrap mb-1 d-block">1246
|
||||
Virgil Street Pensacola, FL 32501</span>
|
||||
<span class="text-muted fw-normal d-block">Mo.
|
||||
012-345-6789</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap p-2 py-1 bg-light rounded-bottom border mt-n1">
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal" data-bs-target="#addAddressModal"><i class="ri-pencil-fill text-muted align-bottom me-1"></i>
|
||||
Edit</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill text-muted align-bottom me-1"></i>
|
||||
Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h5 class="fs-14 mb-3">Shipping Method</h5>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check card-radio">
|
||||
<input id="shippingMethod01" name="shippingMethod" type="radio" class="form-check-input" checked>
|
||||
<label class="form-check-label" for="shippingMethod01">
|
||||
<span class="fs-20 float-end mt-2 text-wrap d-block fw-semibold">Free</span>
|
||||
<span class="fs-14 mb-1 text-wrap d-block">Free
|
||||
Delivery</span>
|
||||
<span class="text-muted fw-normal text-wrap d-block">Expected
|
||||
Delivery 3 to 5 Days</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check card-radio">
|
||||
<input id="shippingMethod02" name="shippingMethod" type="radio" class="form-check-input" checked>
|
||||
<label class="form-check-label" for="shippingMethod02">
|
||||
<span class="fs-20 float-end mt-2 text-wrap d-block fw-semibold">$24.99</span>
|
||||
<span class="fs-14 mb-1 text-wrap d-block">Express
|
||||
Delivery</span>
|
||||
<span class="text-muted fw-normal text-wrap d-block">Delivery
|
||||
within 24hrs.</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-start gap-3 mt-4">
|
||||
<button type="button" class="btn btn-light btn-label previestab" data-previous="pills-bill-info-tab"><i class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>Back
|
||||
to Personal Info</button>
|
||||
<button type="button" class="btn btn-primary btn-label right ms-auto nexttab" data-nexttab="pills-payment-tab"><i class="ri-bank-card-line label-icon align-middle fs-16 ms-2"></i>Continue
|
||||
to Payment</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
|
||||
<div class="tab-pane fade" id="pills-payment" role="tabpanel" aria-labelledby="pills-payment-tab">
|
||||
<div>
|
||||
<h5 class="mb-1">Payment Selection</h5>
|
||||
<p class="text-muted mb-4">Please select and enter your billing information</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div data-bs-toggle="collapse" data-bs-target="#paymentmethodCollapse.show" aria-expanded="false" aria-controls="paymentmethodCollapse">
|
||||
<div class="form-check card-radio">
|
||||
<input id="paymentMethod01" name="paymentMethod" type="radio" class="form-check-input">
|
||||
<label class="form-check-label" for="paymentMethod01">
|
||||
<span class="fs-16 text-muted me-2"><i class="ri-paypal-fill align-bottom"></i></span>
|
||||
<span class="fs-14 text-wrap">Paypal</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div data-bs-toggle="collapse" data-bs-target="#paymentmethodCollapse" aria-expanded="true" aria-controls="paymentmethodCollapse">
|
||||
<div class="form-check card-radio">
|
||||
<input id="paymentMethod02" name="paymentMethod" type="radio" class="form-check-input" checked>
|
||||
<label class="form-check-label" for="paymentMethod02">
|
||||
<span class="fs-16 text-muted me-2"><i class="ri-bank-card-fill align-bottom"></i></span>
|
||||
<span class="fs-14 text-wrap">Credit / Debit Card</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div data-bs-toggle="collapse" data-bs-target="#paymentmethodCollapse.show" aria-expanded="false" aria-controls="paymentmethodCollapse">
|
||||
<div class="form-check card-radio">
|
||||
<input id="paymentMethod03" name="paymentMethod" type="radio" class="form-check-input">
|
||||
<label class="form-check-label" for="paymentMethod03">
|
||||
<span class="fs-16 text-muted me-2"><i class="ri-money-dollar-box-fill align-bottom"></i></span>
|
||||
<span class="fs-14 text-wrap">Cash on Delivery</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse show" id="paymentmethodCollapse">
|
||||
<div class="card p-4 border shadow-none mb-0 mt-4">
|
||||
<div class="row gy-3">
|
||||
<div class="col-md-12">
|
||||
<label for="cc-name" class="form-label">Name on card</label>
|
||||
<input type="text" class="form-control" id="cc-name" placeholder="Enter name">
|
||||
<small class="text-muted">Full name as displayed on card</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="cc-number" class="form-label">Credit card number</label>
|
||||
<input type="text" class="form-control" id="cc-number" placeholder="xxxx xxxx xxxx xxxx">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-expiration" class="form-label">Expiration</label>
|
||||
<input type="text" class="form-control" id="cc-expiration" placeholder="MM/YY">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-cvv" class="form-label">CVV</label>
|
||||
<input type="text" class="form-control" id="cc-cvv" placeholder="xxx">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted mt-2 fst-italic">
|
||||
<i data-feather="lock" class="text-muted icon-xs"></i> Your transaction is
|
||||
secured with SSL encryption
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-start gap-3 mt-4">
|
||||
<button type="button" class="btn btn-light btn-label previestab" data-previous="pills-bill-address-tab"><i class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>Back
|
||||
to Shipping</button>
|
||||
<button type="button" class="btn btn-secondary btn-label right ms-auto nexttab" data-nexttab="pills-finish-tab"><i class="ri-shopping-basket-line label-icon align-middle fs-16 ms-2"></i>Complete
|
||||
Order</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
|
||||
<div class="tab-pane fade" id="pills-finish" role="tabpanel" aria-labelledby="pills-finish-tab">
|
||||
<div class="text-center py-5">
|
||||
|
||||
<div class="mb-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon>
|
||||
</div>
|
||||
<h5>Thank you ! Your Order is Completed !</h5>
|
||||
<p class="text-muted">You will receive an order confirmation email with details
|
||||
of your order.</p>
|
||||
|
||||
<h5 class="fw-semibold">Order ID: <a href="/apps-ecommerce-order-details" class="text-decoration-underline">VZ2451</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
</div>
|
||||
<!-- end tab content -->
|
||||
</form>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="card-title mb-0">Order Summary</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless align-middle mb-0">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th style="width: 90px;" scope="col">Product</th>
|
||||
<th scope="col">Product Info</th>
|
||||
<th scope="col" class="text-end">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar-md bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-8.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="fs-14"><a href="/apps-ecommerce-product-details" class="text-dark">Sweatshirt for Men (Pink)</a></h5>
|
||||
<p class="text-muted mb-0">$ 119.99 x 2</p>
|
||||
</td>
|
||||
<td class="text-end">$ 239.98</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar-md bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-7.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="fs-14"><a href="/apps-ecommerce-product-details" class="text-dark">Noise Evolve Smartwatch</a></h5>
|
||||
<p class="text-muted mb-0">$ 94.99 x 1</p>
|
||||
</td>
|
||||
<td class="text-end">$ 94.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar-md bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-3.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="fs-14"><a href="/apps-ecommerce-product-details" class="text-dark">350 ml Glass Grocery Container</a></h5>
|
||||
<p class="text-muted mb-0">$ 24.99 x 1</p>
|
||||
</td>
|
||||
<td class="text-end">$ 24.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-semibold" colspan="2">Sub Total :</td>
|
||||
<td class="fw-semibold text-end">$ 359.96</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Discount <span class="text-muted">(VELZON15)</span> : </td>
|
||||
<td class="text-end">- $ 50.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Shipping Charge :</td>
|
||||
<td class="text-end">$ 24.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Estimated Tax (12%): </td>
|
||||
<td class="text-end">$ 18.20</td>
|
||||
</tr>
|
||||
<tr class="table-active">
|
||||
<th colspan="2">Total (USD) :</th>
|
||||
<td class="text-end">
|
||||
<span class="fw-semibold">
|
||||
$353.15
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
<!-- removeItemModal -->
|
||||
<div id="removeItemModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this address ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger ">Yes, Delete It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<!-- editItemModal -->
|
||||
<div id="addAddressModal" class="modal fade zoomIn" tabindex="-1" aria-labelledby="addAddressModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="addAddressModalLabel">Address</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label for="addaddress-Name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="addaddress-Name" placeholder="Enter name">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="addaddress-textarea" class="form-label">Address</label>
|
||||
<textarea class="form-control" id="addaddress-textarea" placeholder="Enter address" rows="2"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="addaddress-Name" class="form-label">Phone</label>
|
||||
<input type="text" class="form-control" id="addaddress-Name" placeholder="Enter phone no.">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="state" class="form-label">Address Type</label>
|
||||
<select class="form-select" id="state" data-choices data-choices-search-false>
|
||||
<option value="homeAddress">Home (7am to 10pm)</option>
|
||||
<option value="officeAddress">Office (11am to 7pm)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-success">Save</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- init js -->
|
||||
<script src="/assets/js/pages/ecommerce-product-checkout.init.js"></script>
|
||||
<script>
|
||||
document.querySelector(".main-content").classList.add("overflow-hidden");
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,263 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Customers')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Customers','Ecommerce')"></div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="customerList">
|
||||
<div class="card-header border-bottom-dashed">
|
||||
|
||||
<div class="row g-4 align-items-center">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<h5 class="card-title mb-0">Customer List</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="d-flex flex-wrap align-items-start gap-2">
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
<button type="button" class="btn btn-success add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Add Customer</button>
|
||||
<button type="button" class="btn btn-secondary"><i class="ri-file-download-line align-bottom me-1"></i> Import</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body border-bottom-dashed border-bottom">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-xl-6">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for customer, email, phone, status or something...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-6">
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-4">
|
||||
<div class="">
|
||||
<input type="text" class="form-control" id="datepicker-range" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" placeholder="Select date">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-sm-4">
|
||||
<div>
|
||||
<select class="form-control" data-plugin="choices" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
|
||||
<option value="">Status</option>
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Active">Active</option>
|
||||
<option value="Block">Block</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary w-100" onclick="SearchData();"> <i class="ri-equalizer-fill me-2 align-bottom"></i>Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="table-responsive table-card mb-1">
|
||||
<table class="table align-middle" id="customerTable">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th scope="col" style="width: 50px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="sort" data-sort="customer_name">Customer</th>
|
||||
<th class="sort" data-sort="email">Email</th>
|
||||
<th class="sort" data-sort="phone">Phone</th>
|
||||
<th class="sort" data-sort="date">Joining Date</th>
|
||||
<th class="sort" data-sort="status">Status</th>
|
||||
<th class="sort" data-sort="action">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="chk_child" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ2101</a></td>
|
||||
<td class="customer_name">Mary Cousar</td>
|
||||
<td class="email">marycousar@velzon.com</td>
|
||||
<td class="phone">580-464-4694</td>
|
||||
<td class="date">06 Apr, 2021</td>
|
||||
<td class="status"><span class="badge badge-soft-success text-uppercase">Active</span>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="list-inline hstack gap-2 mb-0">
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
|
||||
<a href="#showModal" data-bs-toggle="modal" class="text-primary d-inline-block edit-item-btn">
|
||||
<i class="ri-pencil-fill fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Remove">
|
||||
<a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal">
|
||||
<i class="ri-delete-bin-5-fill fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ customer We did not
|
||||
find any customer for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="showModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light p-3">
|
||||
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<form class="tablelist-form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="id-field" />
|
||||
|
||||
<div class="mb-3" id="modal-id" style="display: none;">
|
||||
<label for="id-field1" class="form-label">ID</label>
|
||||
<input type="text" id="id-field1" class="form-control" placeholder="ID" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="customername-field" class="form-label">Customer Name</label>
|
||||
<input type="text" id="customername-field" class="form-control" placeholder="Enter name" required />
|
||||
<div class="invalid-feedback">Please enter a customer name.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email-field" class="form-label">Email</label>
|
||||
<input type="email" id="email-field" class="form-control" placeholder="Enter email" required />
|
||||
<div class="invalid-feedback">Please enter an email.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="phone-field" class="form-label">Phone</label>
|
||||
<input type="text" id="phone-field" class="form-control" placeholder="Enter phone no." required />
|
||||
<div class="invalid-feedback">Please enter a phone.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="date-field" class="form-label">Joining Date</label>
|
||||
<input type="date" id="date-field" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" required placeholder="Select date" />
|
||||
<div class="invalid-feedback">Please select a date.</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="status-field" class="form-label">Status</label>
|
||||
<select class="form-control" data-choices data-choices-search-false name="status-field" id="status-field" required>
|
||||
<option value="">Status</option>
|
||||
<option value="Active">Active</option>
|
||||
<option value="Block">Block</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-success" id="add-btn">Add
|
||||
Customer</button>
|
||||
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" id="deleteRecord-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this
|
||||
record ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="delete-record">Yes,
|
||||
Delete It!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<!--ecommerce-customer init js -->
|
||||
<script src="/assets/js/pages/ecommerce-customer-list.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,417 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Order Details')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Order Details','Ecommerce')"></div>
|
||||
<div class="row">
|
||||
<div class="col-xl-9">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items-center">
|
||||
<h5 class="card-title flex-grow-1 mb-0">Order #VL2667</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="/apps-invoices-details" class="btn btn-primary btn-sm"><i class="ri-download-2-fill align-middle me-1"></i> Invoice</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-nowrap align-middle table-borderless mb-0">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th scope="col">Product Details</th>
|
||||
<th scope="col">Item Price</th>
|
||||
<th scope="col">Quantity</th>
|
||||
<th scope="col">Rating</th>
|
||||
<th scope="col" class="text-end">Total Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-md bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-8.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15"><a href="/apps-ecommerce-product-details" class="text-reset">Sweatshirt for Men (Pink)</a></h5>
|
||||
<p class="text-muted mb-0">Color: <span class="fw-medium">Pink</span></p>
|
||||
<p class="text-muted mb-0">Size: <span class="fw-medium">M</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>$119.99</td>
|
||||
<td>02</td>
|
||||
<td>
|
||||
<div class="text-warning fs-15">
|
||||
<i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td class="fw-medium text-end">
|
||||
$239.98
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-md bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-7.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15"><a href="/apps-ecommerce-product-details" class="text-reset">Noise NoiseFit Endure Smart Watch</a>
|
||||
</h5>
|
||||
<p class="text-muted mb-0">Color: <span class="fw-medium">Black</span></p>
|
||||
<p class="text-muted mb-0">Size: <span class="fw-medium">32.5mm</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>$94.99</td>
|
||||
<td>01</td>
|
||||
<td>
|
||||
<div class="text-warning fs-15">
|
||||
<i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td class="fw-medium text-end">
|
||||
$94.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-md bg-light rounded p-1">
|
||||
<img src="/assets/images/products/img-3.png" alt="" class="img-fluid d-block">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-15"><a href="/apps-ecommerce-product-details" class="text-reset">350 ml Glass Grocery Container</a></h5>
|
||||
<p class="text-muted mb-0">Color: <span class="fw-medium">White</span></p>
|
||||
<p class="text-muted mb-0">Size: <span class="fw-medium">350
|
||||
ml</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>$24.99</td>
|
||||
<td>01</td>
|
||||
<td>
|
||||
<div class="text-warning fs-15">
|
||||
<i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-half-fill"></i><i class="ri-star-line"></i><i class="ri-star-line"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td class="fw-medium text-end">
|
||||
$24.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-top border-top-dashed">
|
||||
<td colspan="3"></td>
|
||||
<td colspan="2" class="fw-medium p-0">
|
||||
<table class="table table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sub Total :</td>
|
||||
<td class="text-end">$359.96</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Discount <span class="text-muted">(VELZON15)</span> : :</td>
|
||||
<td class="text-end">-$53.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shipping Charge :</td>
|
||||
<td class="text-end">$65.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estimated Tax :</td>
|
||||
<td class="text-end">$44.99</td>
|
||||
</tr>
|
||||
<tr class="border-top border-top-dashed">
|
||||
<th scope="row">Total (USD) :</th>
|
||||
<th class="text-end">$415.96</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-sm-flex align-items-center">
|
||||
<h5 class="card-title flex-grow-1 mb-0">Order Status</h5>
|
||||
<div class="flex-shrink-0 mt-2 mt-sm-0">
|
||||
<a href="javascript:void(0);" class="btn btn-soft-primary btn-sm mt-2 mt-sm-0"><i class="ri-map-pin-line align-middle me-1"></i> Change Address</a>
|
||||
<a href="javascript:void(0);" class="btn btn-soft-secondary btn-sm mt-2 mt-sm-0"><i class="mdi mdi-archive-remove-outline align-middle me-1"></i> Cancel Order</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="profile-timeline">
|
||||
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||||
<div class="accordion-item border-0">
|
||||
<div class="accordion-header" id="headingOne">
|
||||
<a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 avatar-xs">
|
||||
<div class="avatar-title bg-success rounded-circle">
|
||||
<i class="ri-shopping-bag-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="fs-15 mb-0 fw-semibold">Order Placed - <span class="fw-normal">Wed, 15 Dec 2021</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body ms-2 ps-5 pt-0">
|
||||
<h6 class="mb-1">An order has been placed.</h6>
|
||||
<p class="text-muted">Wed, 15 Dec 2021 - 05:34PM</p>
|
||||
|
||||
<h6 class="mb-1">Seller has proccessed your order.</h6>
|
||||
<p class="text-muted mb-0">Thu, 16 Dec 2021 - 5:48AM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item border-0">
|
||||
<div class="accordion-header" id="headingTwo">
|
||||
<a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 avatar-xs">
|
||||
<div class="avatar-title bg-success rounded-circle">
|
||||
<i class="mdi mdi-gift-outline"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="fs-15 mb-1 fw-semibold">Packed - <span class="fw-normal">Thu, 16 Dec 2021</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body ms-2 ps-5 pt-0">
|
||||
<h6 class="mb-1">Your Item has been picked up by courier patner</h6>
|
||||
<p class="text-muted mb-0">Fri, 17 Dec 2021 - 9:45AM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item border-0">
|
||||
<div class="accordion-header" id="headingThree">
|
||||
<a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 avatar-xs">
|
||||
<div class="avatar-title bg-success rounded-circle">
|
||||
<i class="ri-truck-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="fs-15 mb-1 fw-semibold">Shipping - <span class="fw-normal">Thu, 16 Dec 2021</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body ms-2 ps-5 pt-0">
|
||||
<h6 class="fs-14">RQK Logistics - MFDS1400457854</h6>
|
||||
<h6 class="mb-1">Your item has been shipped.</h6>
|
||||
<p class="text-muted mb-0">Sat, 18 Dec 2021 - 4.54PM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item border-0">
|
||||
<div class="accordion-header" id="headingFour">
|
||||
<a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseFour" aria-expanded="false">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 avatar-xs">
|
||||
<div class="avatar-title bg-light text-success rounded-circle">
|
||||
<i class="ri-takeaway-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="fs-14 mb-0 fw-semibold">Out For Delivery</h6>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item border-0">
|
||||
<div class="accordion-header" id="headingFive">
|
||||
<a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseFile" aria-expanded="false">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 avatar-xs">
|
||||
<div class="avatar-title bg-light text-success rounded-circle">
|
||||
<i class="mdi mdi-package-variant"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="fs-14 mb-0 fw-semibold">Delivered</h6>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end accordion-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex">
|
||||
<h5 class="card-title flex-grow-1 mb-0"><i class="mdi mdi-truck-fast-outline align-middle me-1 text-muted"></i> Logistics
|
||||
Details</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="javascript:void(0);" class="badge badge-soft-primary fs-11">Track Order</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/uetqnvvg.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:80px;height:80px"></lord-icon>
|
||||
<h5 class="fs-16 mt-2">RQK Logistics</h5>
|
||||
<p class="text-muted mb-0">ID: MFDS1400457854</p>
|
||||
<p class="text-muted mb-0">Payment Mode : Debit Card</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex">
|
||||
<h5 class="card-title flex-grow-1 mb-0">Customer Details</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="javascript:void(0);" class="link-secondary">View Profile</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled mb-0 vstack gap-3">
|
||||
<li>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-sm rounded">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="fs-14 mb-1">Joseph Parkers</h6>
|
||||
<p class="text-muted mb-0">Customer</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li><i class="ri-mail-line me-2 align-middle text-muted fs-16"></i>josephparker@gmail.com
|
||||
</li>
|
||||
<li><i class="ri-phone-line me-2 align-middle text-muted fs-16"></i>+(256) 245451 441</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0"><i class="ri-map-pin-line align-middle me-1 text-muted"></i> Billing
|
||||
Address</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled vstack gap-2 fs-13 mb-0">
|
||||
<li class="fw-medium fs-14">Joseph Parker</li>
|
||||
<li>+(256) 245451 451</li>
|
||||
<li>2186 Joyce Street Rocky Mount</li>
|
||||
<li>New York - 25645</li>
|
||||
<li>United States</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0"><i class="ri-map-pin-line align-middle me-1 text-muted"></i>
|
||||
Shipping Address</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled vstack gap-2 fs-13 mb-0">
|
||||
<li class="fw-medium fs-14">Joseph Parker</li>
|
||||
<li>+(256) 245451 451</li>
|
||||
<li>2186 Joyce Street Rocky Mount</li>
|
||||
<li>California - 24567</li>
|
||||
<li>United States</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0"><i class="ri-secure-payment-line align-bottom me-1 text-muted"></i>
|
||||
Payment Details</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted mb-0">Transactions:</p>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="mb-0">#VLZ124561278124</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted mb-0">Payment Method:</p>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="mb-0">Debit Card</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted mb-0">Card Holder Name:</p>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="mb-0">Joseph Parker</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted mb-0">Card Number:</p>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="mb-0">xxxx xxxx xxxx 2456</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted mb-0">Total Amount:</p>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="mb-0">$415.96</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,346 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Orders')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Orders','Ecommerce')"></div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="orderList">
|
||||
<div class="card-header border-0">
|
||||
<div class="row align-items-center gy-3">
|
||||
<div class="col-sm">
|
||||
<h5 class="card-title mb-0">Order History</h5>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="d-flex gap-1 flex-wrap">
|
||||
<button type="button" class="btn btn-secondary add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Create Order</button>
|
||||
<button type="button" class="btn btn-success"><i class="ri-file-download-line align-bottom me-1"></i> Import</button>
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body border border-dashed border-end-0 border-start-0">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-xxl-5 col-sm-6">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for order ID, customer, order status or something...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-6">
|
||||
<div>
|
||||
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" id="demo-datepicker" placeholder="Select date">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<div>
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
|
||||
<option value="">Status</option>
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Cancelled">Cancelled</option>
|
||||
<option value="Pickups">Pickups</option>
|
||||
<option value="Returns">Returns</option>
|
||||
<option value="Delivered">Delivered</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<div>
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idPayment">
|
||||
<option value="">Select Payment</option>
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Mastercard">Mastercard</option>
|
||||
<option value="Paypal">Paypal</option>
|
||||
<option value="Visa">Visa</option>
|
||||
<option value="COD">COD</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-1 col-sm-4">
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary w-100" onclick="SearchData();"> <i class="ri-equalizer-fill me-1 align-bottom"></i>
|
||||
Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div>
|
||||
<ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active All py-3" data-bs-toggle="tab" id="All" href="#home1" role="tab" aria-selected="true">
|
||||
<i class="ri-store-2-fill me-1 align-bottom"></i> All Orders
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-3 Delivered" data-bs-toggle="tab" id="Delivered" href="#delivered" role="tab" aria-selected="false">
|
||||
<i class="ri-checkbox-circle-line me-1 align-bottom"></i> Delivered
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-3 Pickups" data-bs-toggle="tab" id="Pickups" href="#pickups" role="tab" aria-selected="false">
|
||||
<i class="ri-truck-line me-1 align-bottom"></i> Pickups <span class="badge bg-danger align-middle ms-1">2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-3 Returns" data-bs-toggle="tab" id="Returns" href="#returns" role="tab" aria-selected="false">
|
||||
<i class="ri-arrow-left-right-fill me-1 align-bottom"></i> Returns
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-3 Cancelled" data-bs-toggle="tab" id="Cancelled" href="#cancelled" role="tab" aria-selected="false">
|
||||
<i class="ri-close-circle-line me-1 align-bottom"></i> Cancelled
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="table-responsive table-card mb-1">
|
||||
<table class="table table-nowrap align-middle" id="orderTable">
|
||||
<thead class="text-muted table-light">
|
||||
<tr class="text-uppercase fs-13">
|
||||
<th scope="col" style="width: 25px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort" data-sort="id">Order ID</th>
|
||||
<th class="sort" data-sort="customer_name">Customer</th>
|
||||
<th class="sort" data-sort="product_name">Product</th>
|
||||
<th class="sort" data-sort="date">Order Date</th>
|
||||
<th class="sort" data-sort="amount">Amount</th>
|
||||
<th class="sort" data-sort="payment">Payment Method</th>
|
||||
<th class="sort" data-sort="status">Delivery Status</th>
|
||||
<th class="sort" data-sort="city">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="checkAll" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id"><a href="/apps-ecommerce-order-details" class="fw-medium link-primary">#VZ2101</a></td>
|
||||
<td class="customer_name">Frank Hook</td>
|
||||
<td class="product_name">Puma Tshirt</td>
|
||||
<td class="date">20 Dec, 2021, <small class="text-muted">02:21 AM</small>
|
||||
</td>
|
||||
<td class="amount">$654</td>
|
||||
<td class="payment">Mastercard</td>
|
||||
<td class="status"><span class="badge badge-soft-warning text-uppercase">Pending</span>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="list-inline hstack gap-2 mb-0">
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
|
||||
<a href="/apps-ecommerce-order-details" class="text-primary d-inline-block">
|
||||
<i class="ri-eye-fill fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
|
||||
<a href="#showModal" data-bs-toggle="modal" class="text-primary d-inline-block edit-item-btn">
|
||||
<i class="ri-pencil-fill fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Remove">
|
||||
<a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteOrder">
|
||||
<i class="ri-delete-bin-5-fill fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted">We've searched more than 150+ Orders We did not find any
|
||||
orders for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light p-3">
|
||||
<h5 class="modal-title" id="exampleModalLabel"> </h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<form class="tablelist-form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="id-field" />
|
||||
|
||||
<div class="mb-3" id="modal-id">
|
||||
<label for="orderId" class="form-label">ID</label>
|
||||
<input type="text" id="orderId" class="form-control" placeholder="ID" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="customername-field" class="form-label">Customer Name</label>
|
||||
<input type="text" id="customername-field" class="form-control" placeholder="Enter name" required />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="productname-field" class="form-label">Product</label>
|
||||
<select class="form-control" data-trigger name="productname-field" id="productname-field" required />
|
||||
<option value="">Product</option>
|
||||
<option value="Puma Tshirt">Puma Tshirt</option>
|
||||
<option value="Adidas Sneakers">Adidas Sneakers</option>
|
||||
<option value="350 ml Glass Grocery Container">350 ml Glass Grocery
|
||||
Container</option>
|
||||
<option value="American egale outfitters Shirt">American egale
|
||||
outfitters Shirt</option>
|
||||
<option value="Galaxy Watch4">Galaxy Watch4</option>
|
||||
<option value="Apple iPhone 12">Apple iPhone 12</option>
|
||||
<option value="Funky Prints T-shirt">Funky Prints T-shirt</option>
|
||||
<option value="USB Flash Drive Personalized with 3D Print">USB Flash
|
||||
Drive Personalized with 3D Print</option>
|
||||
<option value="Oxford Button-Down Shirt">Oxford Button-Down Shirt
|
||||
</option>
|
||||
<option value="Classic Short Sleeve Shirt">Classic Short Sleeve Shirt
|
||||
</option>
|
||||
<option value="Half Sleeve T-Shirts (Blue)">Half Sleeve T-Shirts (Blue)
|
||||
</option>
|
||||
<option value="Noise Evolve Smartwatch">Noise Evolve Smartwatch</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="date-field" class="form-label">Order Date</label>
|
||||
<input type="date" id="date-field" class="form-control" data-provider="flatpickr" required data-date-format="d M, Y" data-enable-time placeholder="Select date" />
|
||||
</div>
|
||||
|
||||
<div class="row gy-4 mb-3">
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="amount-field" class="form-label">Amount</label>
|
||||
<input type="text" id="amount-field" class="form-control" placeholder="Total amount" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="payment-field" class="form-label">Payment
|
||||
Method</label>
|
||||
<select class="form-control" data-trigger name="payment-method" required id="payment-field">
|
||||
<option value="">Payment Method</option>
|
||||
<option value="Mastercard">Mastercard</option>
|
||||
<option value="Visa">Visa</option>
|
||||
<option value="COD">COD</option>
|
||||
<option value="Paypal">Paypal</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="delivered-status" class="form-label">Delivery Status</label>
|
||||
<select class="form-control" data-trigger name="delivered-status" required id="delivered-status">
|
||||
<option value="">Delivery Status</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Cancelled">Cancelled</option>
|
||||
<option value="Pickups">Pickups</option>
|
||||
<option value="Delivered">Delivered</option>
|
||||
<option value="Returns">Returns</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary" id="add-btn">Add
|
||||
Order</button>
|
||||
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body p-5 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
|
||||
</lord-icon>
|
||||
<div class="mt-4 text-center">
|
||||
<h4>You are about to delete a order ?</h4>
|
||||
<p class="text-muted fs-15 mb-4">Deleting your order will remove all of your
|
||||
information from our database.</p>
|
||||
<div class="hstack gap-2 justify-content-center remove">
|
||||
<button class="btn btn-link link-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button class="btn btn-danger" id="delete-record">Yes, Delete
|
||||
It</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- ckeditor -->
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
|
||||
<!--list pagination js-->
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<!-- ecommerce-order init js -->
|
||||
<script src="/assets/js/pages/ecommerce-order.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,749 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Product Details')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!--Swiper slider css-->
|
||||
<link href="assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Product Details','Ecommerce')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row gx-lg-5">
|
||||
<div class="col-xl-4 col-md-8 mx-auto">
|
||||
<div class="product-img-slider sticky-side-div">
|
||||
<div class="swiper product-thumbnail-slider p-2 rounded bg-light">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/products/img-8.png" alt=""
|
||||
class="img-fluid d-block" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/products/img-6.png" alt=""
|
||||
class="img-fluid d-block" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/products/img-1.png" alt=""
|
||||
class="img-fluid d-block" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="assets/images/products/img-8.png" alt=""
|
||||
class="img-fluid d-block" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
<!-- end swiper thumbnail slide -->
|
||||
<div class="swiper product-nav-slider mt-2">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="nav-slide-item">
|
||||
<img src="assets/images/products/img-8.png" alt=""
|
||||
class="img-fluid d-block" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="nav-slide-item">
|
||||
<img src="assets/images/products/img-6.png" alt=""
|
||||
class="img-fluid d-block" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="nav-slide-item">
|
||||
<img src="assets/images/products/img-1.png" alt=""
|
||||
class="img-fluid d-block" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="nav-slide-item">
|
||||
<img src="assets/images/products/img-8.png" alt=""
|
||||
class="img-fluid d-block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end swiper nav slide -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="mt-xl-0 mt-5">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h5>Full Sleeve Sweatshirt for Men (Pink)</h5>
|
||||
<div class="hstack gap-3 flex-wrap">
|
||||
<div><a href="#" class="text-primary d-block">Tommy Hilfiger</a></div>
|
||||
<div class="vr"></div>
|
||||
<div class="text-muted">Seller : <span
|
||||
class="text-body fw-medium">Zoetic Fashion</span></div>
|
||||
<div class="vr"></div>
|
||||
<div class="text-muted">Published : <span class="text-body fw-medium">26
|
||||
Mar, 2021</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div>
|
||||
<a href="/apps-ecommerce-add-product" class="btn btn-light"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><i
|
||||
class="ri-pencil-fill align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center mt-3">
|
||||
<div class="text-muted fs-16">
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
</div>
|
||||
<div class="text-muted">( 5.50k Customer Review )</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="p-2 border border-dashed rounded">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm me-2">
|
||||
<div
|
||||
class="avatar-title rounded bg-transparent text-secondary fs-24">
|
||||
<i class="ri-money-dollar-circle-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-1">Price :</p>
|
||||
<h5 class="mb-0 fs-16">$120.40</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="p-2 border border-dashed rounded">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm me-2">
|
||||
<div
|
||||
class="avatar-title rounded bg-transparent text-secondary fs-24">
|
||||
<i class="ri-file-copy-2-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-1">No. of Orders :</p>
|
||||
<h5 class="mb-0 fs-16">2,234</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="p-2 border border-dashed rounded">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm me-2">
|
||||
<div
|
||||
class="avatar-title rounded bg-transparent text-secondary fs-24">
|
||||
<i class="ri-stack-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-1">Available Stocks :</p>
|
||||
<h5 class="mb-0 fs-16">1,230</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="p-2 border border-dashed rounded">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm me-2">
|
||||
<div
|
||||
class="avatar-title rounded bg-transparent text-secondary fs-24">
|
||||
<i class="ri-inbox-archive-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-1">Total Revenue :</p>
|
||||
<h5 class="mb-0 fs-16">$60,645</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="fs-14">Sizes :</h5>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="Out of Stock">
|
||||
<input type="radio" class="btn-check" name="productsize-radio"
|
||||
id="productsize-radio1" disabled>
|
||||
<label
|
||||
class="btn btn-soft-primary avatar-xs rounded-circle p-0 d-flex justify-content-center align-items-center"
|
||||
for="productsize-radio1">S</label>
|
||||
</div>
|
||||
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="04 Items Available">
|
||||
<input type="radio" class="btn-check" name="productsize-radio"
|
||||
id="productsize-radio2">
|
||||
<label
|
||||
class="btn btn-soft-primary avatar-xs rounded-circle p-0 d-flex justify-content-center align-items-center"
|
||||
for="productsize-radio2">M</label>
|
||||
</div>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="06 Items Available">
|
||||
<input type="radio" class="btn-check" name="productsize-radio"
|
||||
id="productsize-radio3">
|
||||
<label
|
||||
class="btn btn-soft-primary avatar-xs rounded-circle p-0 d-flex justify-content-center align-items-center"
|
||||
for="productsize-radio3">L</label>
|
||||
</div>
|
||||
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="Out of Stock">
|
||||
<input type="radio" class="btn-check" name="productsize-radio"
|
||||
id="productsize-radio4" disabled>
|
||||
<label
|
||||
class="btn btn-soft-primary avatar-xs rounded-circle p-0 d-flex justify-content-center align-items-center"
|
||||
for="productsize-radio4">XL</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class=" mt-4">
|
||||
<h5 class="fs-14">Colors :</h5>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="Out of Stock">
|
||||
<button type="button"
|
||||
class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-20 text-primary"
|
||||
disabled>
|
||||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="03 Items Available">
|
||||
<button type="button"
|
||||
class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-20 text-secondary">
|
||||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="03 Items Available">
|
||||
<button type="button"
|
||||
class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-20 text-success">
|
||||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="02 Items Available">
|
||||
<button type="button"
|
||||
class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-20 text-info">
|
||||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="01 Items Available">
|
||||
<button type="button"
|
||||
class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-20 text-warning">
|
||||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="04 Items Available">
|
||||
<button type="button"
|
||||
class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-20 text-danger">
|
||||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="03 Items Available">
|
||||
<button type="button"
|
||||
class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-20 text-light">
|
||||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" title="04 Items Available">
|
||||
<button type="button"
|
||||
class="btn avatar-xs p-0 d-flex align-items-center justify-content-center border rounded-circle fs-20 text-dark">
|
||||
<i class="ri-checkbox-blank-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="mt-4 text-muted">
|
||||
<h5 class="fs-14">Description :</h5>
|
||||
<p>Tommy Hilfiger men striped pink sweatshirt. Crafted with cotton. Material
|
||||
composition is 100% organic cotton. This is one of the world’s leading
|
||||
designer lifestyle brands and is internationally recognized for celebrating
|
||||
the essence of classic American cool style, featuring preppy with a twist
|
||||
designs.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mt-3">
|
||||
<h5 class="fs-14">Features :</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="py-1"><i
|
||||
class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
Full Sleeve</li>
|
||||
<li class="py-1"><i
|
||||
class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
Cotton</li>
|
||||
<li class="py-1"><i
|
||||
class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
All Sizes available</li>
|
||||
<li class="py-1"><i
|
||||
class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
4 Different Color</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="mt-3">
|
||||
<h5 class="fs-14">Services :</h5>
|
||||
<ul class="list-unstyled product-desc-list">
|
||||
<li class="py-1">10 Days Replacement</li>
|
||||
<li class="py-1">Cash on Delivery available</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="product-content mt-5">
|
||||
<h5 class="fs-14 mb-3">Product Description :</h5>
|
||||
<nav>
|
||||
<ul class="nav nav-tabs nav-tabs-custom nav-success" id="nav-tab"
|
||||
role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="nav-speci-tab" data-bs-toggle="tab"
|
||||
href="#nav-speci" role="tab" aria-controls="nav-speci"
|
||||
aria-selected="true">Specification</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="nav-detail-tab" data-bs-toggle="tab"
|
||||
href="#nav-detail" role="tab" aria-controls="nav-detail"
|
||||
aria-selected="false">Details</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="tab-content border border-top-0 p-4" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-speci" role="tabpanel"
|
||||
aria-labelledby="nav-speci-tab">
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" style="width: 200px;">Category</th>
|
||||
<td>T-Shirt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Brand</th>
|
||||
<td>Tommy Hilfiger</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Color</th>
|
||||
<td>Blue</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Material</th>
|
||||
<td>Cotton</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Weight</th>
|
||||
<td>140 Gram</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-detail" role="tabpanel"
|
||||
aria-labelledby="nav-detail-tab">
|
||||
<div>
|
||||
<h5 class="font-size-16 mb-3">Tommy Hilfiger Sweatshirt for Men
|
||||
(Pink)</h5>
|
||||
<p>Tommy Hilfiger men striped pink sweatshirt. Crafted with cotton.
|
||||
Material composition is 100% organic cotton. This is one of the
|
||||
world’s leading designer lifestyle brands and is internationally
|
||||
recognized for celebrating the essence of classic American cool
|
||||
style, featuring preppy with a twist designs.</p>
|
||||
<div>
|
||||
<p class="mb-2"><i
|
||||
class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
Machine Wash</p>
|
||||
<p class="mb-2"><i
|
||||
class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
Fit Type: Regular</p>
|
||||
<p class="mb-2"><i
|
||||
class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
100% Cotton</p>
|
||||
<p class="mb-0"><i
|
||||
class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
Long sleeve</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- product-content -->
|
||||
|
||||
<div class="mt-5">
|
||||
<div>
|
||||
<h5 class="fs-14 mb-3">Ratings & Reviews</h5>
|
||||
</div>
|
||||
<div class="row gy-4 gx-0">
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<div class="pb-3">
|
||||
<div class="bg-light px-3 py-2 rounded-2 mb-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<div class="fs-16 align-middle text-warning">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">4.5 out of 5</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-muted">Total <span
|
||||
class="fw-medium">5.50k</span> reviews
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">5 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-success"
|
||||
role="progressbar" style="width: 50.16%"
|
||||
aria-valuenow="50.16" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">2758</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">4 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-primary"
|
||||
role="progressbar" style="width: 19.32%"
|
||||
aria-valuenow="19.32" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">1063</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">3 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-success"
|
||||
role="progressbar" style="width: 18.12%"
|
||||
aria-valuenow="18.12" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">997</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">2 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-warning"
|
||||
role="progressbar" style="width: 7.42%"
|
||||
aria-valuenow="7.42" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">408</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">1 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-danger"
|
||||
role="progressbar" style="width: 4.98%"
|
||||
aria-valuenow="4.98" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">274</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="ps-lg-4">
|
||||
<div class="d-flex flex-wrap align-items-start gap-3">
|
||||
<h5 class="fs-14">Reviews: </h5>
|
||||
</div>
|
||||
|
||||
<div class="me-lg-n3 pe-lg-4" data-simplebar
|
||||
style="max-height: 225px;">
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="py-2">
|
||||
<div class="border border-dashed rounded p-3">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<div class="hstack gap-3">
|
||||
<div
|
||||
class="badge rounded-pill bg-success mb-0">
|
||||
<i class="mdi mdi-star"></i> 4.2
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-0"> Superb
|
||||
sweatshirt. I loved it. It is for
|
||||
winter.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-grow-1 gap-2 mb-3">
|
||||
<a href="#" class="d-block">
|
||||
<img src="/assets/images/small/img-12.jpg"
|
||||
alt=""
|
||||
class="avatar-sm rounded object-cover">
|
||||
</a>
|
||||
<a href="#" class="d-block">
|
||||
<img src="/assets/images/small/img-11.jpg"
|
||||
alt=""
|
||||
class="avatar-sm rounded object-cover">
|
||||
</a>
|
||||
<a href="#" class="d-block">
|
||||
<img src="/assets/images/small/img-10.jpg"
|
||||
alt=""
|
||||
class="avatar-sm rounded object-cover">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-end">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Henry</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13 mb-0">12 Jul, 21
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="border border-dashed rounded p-3">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<div class="hstack gap-3">
|
||||
<div
|
||||
class="badge rounded-pill bg-success mb-0">
|
||||
<i class="mdi mdi-star"></i> 4.0
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-0"> Great at
|
||||
this price, Product quality and look
|
||||
is awesome.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Nancy</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13 mb-0">06 Jul, 21
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="py-2">
|
||||
<div class="border border-dashed rounded p-3">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<div class="hstack gap-3">
|
||||
<div
|
||||
class="badge rounded-pill bg-success mb-0">
|
||||
<i class="mdi mdi-star"></i> 4.2
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-0">Good product.
|
||||
I am so happy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Joseph</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13 mb-0">06 Jul, 21
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="py-2">
|
||||
<div class="border border-dashed rounded p-3">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<div class="hstack gap-3">
|
||||
<div
|
||||
class="badge rounded-pill bg-success mb-0">
|
||||
<i class="mdi mdi-star"></i> 4.1
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-0">Nice Product,
|
||||
Good Quality.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Jimmy</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13 mb-0">24 Jun, 21
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end Ratings & Reviews -->
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!--Swiper slider js-->
|
||||
<script src="/assets/libs/swiper/swiper-bundle.min.js"></script>
|
||||
|
||||
<!-- ecommerce product details init -->
|
||||
<script src="/assets/js/pages/ecommerce-product-details.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,418 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Products')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- nouisliderribute css -->
|
||||
<link rel="stylesheet" href="/assets/libs/nouislider/nouislider.min.css">
|
||||
|
||||
<!-- gridjs css -->
|
||||
<link rel="stylesheet" href="/assets/libs/gridjs/theme/mermaid.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Products','Ecommerce')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-16">Filters</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#" class="text-decoration-underline" id="clearall">Clear All</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-choices-input">
|
||||
<input class="form-control" data-choices data-choices-removeItem type="text" id="filter-choices-input" value="T-Shirts" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion accordion-flush filter-accordion">
|
||||
|
||||
<div class="card-body border-bottom">
|
||||
<div>
|
||||
<p class="text-muted text-uppercase fs-12 fw-medium mb-2">Products</p>
|
||||
<ul class="list-unstyled mb-0 filter-list">
|
||||
<li>
|
||||
<a href="#" class="d-flex py-1 align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0 listname">Grocery</h5>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="d-flex py-1 align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0 listname">Fashion</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<span class="badge bg-light text-muted">5</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="d-flex py-1 align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0 listname">Watches</h5>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="d-flex py-1 align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0 listname">Electronics</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<span class="badge bg-light text-muted">5</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="d-flex py-1 align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0 listname">Furniture</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<span class="badge bg-light text-muted">6</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="d-flex py-1 align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0 listname">Automotive Accessories</h5>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="d-flex py-1 align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0 listname">Appliances</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<span class="badge bg-light text-muted">7</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" class="d-flex py-1 align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0 listname">Kids</h5>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom">
|
||||
<p class="text-muted text-uppercase fs-12 fw-medium mb-4">Price</p>
|
||||
|
||||
<div id="product-price-range"></div>
|
||||
<div class="formCost d-flex gap-2 align-items-center mt-3">
|
||||
<input class="form-control form-control-sm" type="text" id="minCost" value="0" /> <span class="fw-semibold text-muted">to</span> <input class="form-control form-control-sm" type="text" id="maxCost" value="1000" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingBrands">
|
||||
<button class="accordion-button bg-transparent shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseBrands" aria-expanded="true" aria-controls="flush-collapseBrands">
|
||||
<span class="text-muted text-uppercase fs-12 fw-medium">Brands</span> <span class="badge bg-success rounded-pill align-middle ms-1 filter-badge"></span>
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div id="flush-collapseBrands" class="accordion-collapse collapse show" aria-labelledby="flush-headingBrands">
|
||||
<div class="accordion-body text-body pt-0">
|
||||
<div class="search-box search-box-sm">
|
||||
<input type="text" class="form-control bg-light border-0" id="searchBrandsList" placeholder="Search Brands...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-2 mt-3 filter-check">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="Boat" id="productBrandRadio5" checked>
|
||||
<label class="form-check-label" for="productBrandRadio5">Boat</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="OnePlus" id="productBrandRadio4">
|
||||
<label class="form-check-label" for="productBrandRadio4">OnePlus</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="Realme" id="productBrandRadio3">
|
||||
<label class="form-check-label" for="productBrandRadio3">Realme</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="Sony" id="productBrandRadio2">
|
||||
<label class="form-check-label" for="productBrandRadio2">Sony</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="JBL" id="productBrandRadio1" checked>
|
||||
<label class="form-check-label" for="productBrandRadio1">JBL</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-link text-decoration-none text-uppercase fw-medium p-0">1,235
|
||||
More</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end accordion-item -->
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingDiscount">
|
||||
<button class="accordion-button bg-transparent shadow-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseDiscount" aria-expanded="true" aria-controls="flush-collapseDiscount">
|
||||
<span class="text-muted text-uppercase fs-12 fw-medium">Discount</span> <span class="badge bg-success rounded-pill align-middle ms-1 filter-badge"></span>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseDiscount" class="accordion-collapse collapse" aria-labelledby="flush-headingDiscount">
|
||||
<div class="accordion-body text-body pt-1">
|
||||
<div class="d-flex flex-column gap-2 filter-check">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="50% or more" id="productdiscountRadio6">
|
||||
<label class="form-check-label" for="productdiscountRadio6">50% or
|
||||
more</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="40% or more" id="productdiscountRadio5">
|
||||
<label class="form-check-label" for="productdiscountRadio5">40% or
|
||||
more</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="30% or more" id="productdiscountRadio4">
|
||||
<label class="form-check-label" for="productdiscountRadio4">
|
||||
30% or more
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="20% or more" id="productdiscountRadio3" checked>
|
||||
<label class="form-check-label" for="productdiscountRadio3">
|
||||
20% or more
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="10% or more" id="productdiscountRadio2">
|
||||
<label class="form-check-label" for="productdiscountRadio2">
|
||||
10% or more
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="Less than 10%" id="productdiscountRadio1">
|
||||
<label class="form-check-label" for="productdiscountRadio1">
|
||||
Less than 10%
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end accordion-item -->
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingRating">
|
||||
<button class="accordion-button bg-transparent shadow-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseRating" aria-expanded="false" aria-controls="flush-collapseRating">
|
||||
<span class="text-muted text-uppercase fs-12 fw-medium">Rating</span> <span class="badge bg-success rounded-pill align-middle ms-1 filter-badge"></span>
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div id="flush-collapseRating" class="accordion-collapse collapse" aria-labelledby="flush-headingRating">
|
||||
<div class="accordion-body text-body">
|
||||
<div class="d-flex flex-column gap-2 filter-check">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="4 & Above Star" id="productratingRadio4" checked>
|
||||
<label class="form-check-label" for="productratingRadio4">
|
||||
<span class="text-muted">
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
</span> 4 & Above
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="3 & Above Star" id="productratingRadio3">
|
||||
<label class="form-check-label" for="productratingRadio3">
|
||||
<span class="text-muted">
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
</span> 3 & Above
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="2 & Above Star" id="productratingRadio2">
|
||||
<label class="form-check-label" for="productratingRadio2">
|
||||
<span class="text-muted">
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
</span> 2 & Above
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="1 Star" id="productratingRadio1">
|
||||
<label class="form-check-label" for="productratingRadio1">
|
||||
<span class="text-muted">
|
||||
<i class="mdi mdi-star text-warning"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
</span> 1
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end accordion-item -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-9 col-lg-8">
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-auto">
|
||||
<div>
|
||||
<a href="/apps-ecommerce-add-product" class="btn btn-secondary" id="addproduct-btn"><i class="ri-add-line align-bottom me-1"></i> Add
|
||||
Product</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="d-flex justify-content-sm-end">
|
||||
<div class="search-box ms-2">
|
||||
<input type="text" class="form-control" id="searchProductList" placeholder="Search Products...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-header">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<ul class="nav nav-tabs-custom card-header-tabs border-bottom-0" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active fw-semibold" data-bs-toggle="tab" href="#productnav-all" role="tab">
|
||||
All <span class="badge badge-soft-danger align-middle rounded-pill ms-1">12</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fw-semibold" data-bs-toggle="tab" href="#productnav-published" role="tab">
|
||||
Published <span class="badge badge-soft-danger align-middle rounded-pill ms-1">5</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fw-semibold" data-bs-toggle="tab" href="#productnav-draft" role="tab">
|
||||
Draft
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div id="selection-element">
|
||||
<div class="my-n1 d-flex align-items-center text-muted">
|
||||
Select <div id="select-content" class="text-body fw-semibold px-1"></div>
|
||||
Result <button type="button" class="btn btn-link link-danger p-0 ms-3" data-bs-toggle="modal" data-bs-target="#removeItemModal">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card header -->
|
||||
<div class="card-body">
|
||||
|
||||
<div class="tab-content text-muted">
|
||||
<div class="tab-pane active" id="productnav-all" role="tabpanel">
|
||||
<div id="table-product-list-all" class="table-card gridjs-border-none"></div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
|
||||
<div class="tab-pane" id="productnav-published" role="tabpanel">
|
||||
<div id="table-product-list-published" class="table-card gridjs-border-none"></div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
|
||||
<div class="tab-pane" id="productnav-draft" role="tabpanel">
|
||||
<div class="py-4 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:72px;height:72px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-4">Sorry! No Result Found</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end tab pane -->
|
||||
</div>
|
||||
<!-- end tab content -->
|
||||
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
<!-- removeItemModal -->
|
||||
<div id="removeItemModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this product ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger " id="delete-product">Yes, Delete
|
||||
It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- nouisliderribute js -->
|
||||
<script src="/assets/libs/nouislider/nouislider.min.js"></script>
|
||||
<script src="/assets/libs/wnumb/wNumb.min.js"></script>
|
||||
|
||||
<!-- gridjs js -->
|
||||
<script src="/assets/libs/gridjs/gridjs.umd.js"></script>
|
||||
<script src="https://unpkg.com/gridjs/plugins/selection/dist/selection.umd.js"></script>
|
||||
<!-- ecommerce product list -->
|
||||
<script src="/assets/js/pages/ecommerce-product-list.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,453 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Seller Details')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- gridjs css -->
|
||||
<link rel="stylesheet" href="/assets/libs/gridjs/theme/mermaid.min.css">
|
||||
|
||||
<!--Swiper slider css-->
|
||||
<link href="/assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Seller Details','Ecommerce')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-body p-4">
|
||||
<div>
|
||||
<div class="flex-shrink-0 avatar-md mx-auto">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/companies/img-2.png" alt="" height="50" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h5 class="mb-1">Force Medicines</h5>
|
||||
<p class="text-muted">Since 1987</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0 table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><span class="fw-medium">Owner Name</span></th>
|
||||
<td>David Marshall</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><span class="fw-medium">Company Type</span></th>
|
||||
<td>Partnership</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><span class="fw-medium">Email</span></th>
|
||||
<td>forcemedicines@gamil.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><span class="fw-medium">Website</span></th>
|
||||
<td><a href="javascript:void(0);" class="link-primary">www.forcemedicines.com</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><span class="fw-medium">Contact No.</span></th>
|
||||
<td>+(123) 9876 654 321</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><span class="fw-medium">Fax</span></th>
|
||||
<td>+1 999 876 5432</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><span class="fw-medium">Location</span></th>
|
||||
<td>United Kingdom</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
<div class="card-body border-top border-top-dashed p-4">
|
||||
<div>
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-4">Customer Reviews</h6>
|
||||
<div>
|
||||
<div>
|
||||
<div class="bg-light px-3 py-2 rounded-2 mb-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<div class="fs-16 align-middle text-warning">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">4.5 out of 5</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-muted">Total <span class="fw-medium">5.50k</span> reviews</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0">5 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-1">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 50.16%" aria-valuenow="50.16" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0 text-muted">2758</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0">4 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-1">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 29.32%" aria-valuenow="29.32" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0 text-muted">1063</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0">3 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-1">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 18.12%" aria-valuenow="18.12" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0 text-muted">997</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0">2 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-1">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 4.98%" aria-valuenow="4.98" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0 text-muted">227</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0">1 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-1">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 7.42%" aria-valuenow="7.42" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-1">
|
||||
<h6 class="mb-0 text-muted">408</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
<div class="card-body p-4 border-top border-top-dashed">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-4">Products Reviews</h6>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper vertical-swiper" style="height: 242px;">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="card border border-dashed shadow-none">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/companies/img-1.png" alt="" height="30">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div>
|
||||
<p class="text-muted mb-1 fst-italic">" Great product and looks
|
||||
great, lots of features. "</p>
|
||||
<div class="fs-11 align-middle text-warning">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mb-0 text-muted">
|
||||
- by <cite title="Source Title">Force Medicines</cite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card border border-dashed shadow-none">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt="" class="avatar-sm rounded">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div>
|
||||
<p class="text-muted mb-1 fst-italic">" Amazing template, very
|
||||
easy to understand and manipulate. "</p>
|
||||
<div class="fs-11 align-middle text-warning">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mb-0 text-muted">
|
||||
- by <cite title="Source Title">Henry Baird</cite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card border border-dashed shadow-none">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/companies/img-8.png" alt="" height="30">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div>
|
||||
<p class="text-muted mb-1 fst-italic">"Very beautiful product
|
||||
and Very helpful customer service."</p>
|
||||
<div class="fs-11 align-middle text-warning">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-line"></i>
|
||||
<i class="ri-star-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mb-0 text-muted">
|
||||
- by <cite title="Source Title">Zoetic Fashion</cite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card border border-dashed shadow-none">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="avatar-sm rounded">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div>
|
||||
<p class="text-muted mb-1 fst-italic">" The product is very
|
||||
beautiful. I like it. "</p>
|
||||
<div class="fs-11 align-middle text-warning">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
<i class="ri-star-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mb-0 text-muted">
|
||||
- by <cite title="Source Title">Nancy Martino</cite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<a href="javascript:void(0)" class="link-primary">View All Reviews <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4 border-top border-top-dashed">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-4">Contact Support</h6>
|
||||
<form action="#">
|
||||
<div class="mb-3">
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="4" placeholder="Enter your messages..."></textarea>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button type="submit" class="btn btn-primary"><i class="ri-mail-send-line align-bottom me-1"></i> Send Messages</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-9">
|
||||
<div class="card">
|
||||
<div class="card-header border-0 align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Revenue</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-soft-secondary btn-sm">
|
||||
ALL
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-secondary btn-sm">
|
||||
1M
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-secondary btn-sm">
|
||||
6M
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-primary btn-sm">
|
||||
1Y
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-header p-0 border-0 bg-soft-light">
|
||||
<div class="row g-0 text-center">
|
||||
<div class="col-6 col-sm-3">
|
||||
<div class="p-3 border border-dashed border-start-0">
|
||||
<h5 class="mb-1"><span class="counter-value" data-target="7585">0</span></h5>
|
||||
<p class="text-muted mb-0">Orders</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6 col-sm-3">
|
||||
<div class="p-3 border border-dashed border-start-0">
|
||||
<h5 class="mb-1">$<span class="counter-value" data-target="22.89">0</span>k</h5>
|
||||
<p class="text-muted mb-0">Earnings</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6 col-sm-3">
|
||||
<div class="p-3 border border-dashed border-start-0">
|
||||
<h5 class="mb-1"><span class="counter-value" data-target="367">0</span></h5>
|
||||
<p class="text-muted mb-0">Refunds</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6 col-sm-3">
|
||||
<div class="p-3 border border-dashed border-start-0 border-end-0">
|
||||
<h5 class="mb-1 text-success"><span class="counter-value" data-target="18.92">0</span>%</h5>
|
||||
<p class="text-muted mb-0">Conversation Ratio</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body p-0 pb-2">
|
||||
<div>
|
||||
<div id="customer_impression_charts" data-colors='["--vz-secondary", "--vz-primary", "--vz-success"]' class="apex-charts"></div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
|
||||
<div class="row g-4 mb-3">
|
||||
<div class="col-sm-auto">
|
||||
<div>
|
||||
<a href="/apps-ecommerce-add-product" class="btn btn-secondary"><i class="ri-add-line align-bottom me-1"></i> Add New</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="d-flex justify-content-sm-end">
|
||||
<div class="search-box ms-2">
|
||||
<input type="text" class="form-control" placeholder="Search Products...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="table-product-list-all" class="table-card gridjs-border-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- gridjs js -->
|
||||
<script src="/assets/libs/gridjs/gridjs.umd.js"></script>
|
||||
<script src="https://unpkg.com/gridjs/plugins/selection/dist/selection.umd.js"></script>
|
||||
|
||||
<!--Swiper slider js-->
|
||||
<script src="/assets/libs/swiper/swiper-bundle.min.js"></script>
|
||||
|
||||
<!--seller-details init js -->
|
||||
<script src="/assets/js/pages/seller-details.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,560 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Sellers')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Sellers','Ecommerce')"></div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header border-0 rounded">
|
||||
<div class="row g-2">
|
||||
<div class="col-xl-3">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for sellers & owner name or something..."> <i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 ms-auto">
|
||||
<div>
|
||||
<select class="form-control" data-choices data-choices-search-false>
|
||||
<option value="">Select Categories</option>
|
||||
<option value="All">All</option>
|
||||
<option value="Retailer">Retailer</option>
|
||||
<option value="Health & Medicine">Health & Medicine</option>
|
||||
<option value="Manufacturer">Manufacturer</option>
|
||||
<option value="Food Service">Food Service</option>
|
||||
<option value="Computers & Electronics">Computers & Electronics</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-auto">
|
||||
<div class="hstack gap-2">
|
||||
<button type="button" class="btn btn-danger"><i class="ri-equalizer-fill me-1 align-bottom"></i> Filters</button>
|
||||
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addSeller"><i class="ri-add-fill me-1 align-bottom"></i> Add Seller</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="card ribbon-box right overflow-hidden">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="ribbon ribbon-danger ribbon-shape trending-ribbon"><i class="ri-flashlight-fill text-white align-bottom"></i> <span class="trending-ribbon-text">Trending</span></div>
|
||||
<img src="/assets/images/companies/img-1.png" alt="" height="45">
|
||||
<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Force Medicines</a></h5>
|
||||
<p class="text-muted mb-4">David Marshall</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div id="chart-seller1" data-colors='["--vz-danger"]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 border-end-dashed border-end">
|
||||
<h5>452</h5>
|
||||
<span class="text-muted">Item Stock</span>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5>$45,415</h5>
|
||||
<span class="text-muted">Wallet Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body text-center p-4">
|
||||
<img src="/assets/images/companies/img-2.png" alt="" height="45">
|
||||
<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Micro Design</a></h5>
|
||||
<p class="text-muted mb-4">Katia Stapleton</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div id="chart-seller2" data-colors='["--vz-success"]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 border-end-dashed border-end">
|
||||
<h5>784</h5>
|
||||
<span class="text-muted">Item Stock</span>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5>$97,642</h5>
|
||||
<span class="text-muted">Wallet Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body text-center p-4">
|
||||
<img src="/assets/images/companies/img-3.png" alt="" height="45">
|
||||
<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Nesta Technologies</a></h5>
|
||||
<p class="text-muted mb-4">Harley Fuller</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div id="chart-seller3" data-colors='["--vz-warning"]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 border-end-dashed border-end">
|
||||
<h5>320</h5>
|
||||
<span class="text-muted">Item Stock</span>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5>$27,102</h5>
|
||||
<span class="text-muted">Wallet Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="card ribbon-box right overflow-hidden">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="ribbon ribbon-danger ribbon-shape trending-ribbon"><i class="ri-flashlight-fill text-white align-bottom"></i> <span class="trending-ribbon-text">Trending</span></div>
|
||||
<img src="/assets/images/companies/img-4.png" alt="" height="45">
|
||||
<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">iTest Factory</a></h5>
|
||||
<p class="text-muted mb-4">Oliver Tyler</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div id="chart-seller4" data-colors='["--vz-success"]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 border-end-dashed border-end">
|
||||
<h5>159</h5>
|
||||
<span class="text-muted">Item Stock</span>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5>$14,933</h5>
|
||||
<span class="text-muted">Wallet Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body text-center p-4">
|
||||
<img src="/assets/images/companies/img-5.png" alt="" height="45">
|
||||
<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Meta4Systems</a></h5>
|
||||
<p class="text-muted mb-4">Zoe Dennis</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div id="chart-seller5" data-colors='["--vz-warning"]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 border-end-dashed border-end">
|
||||
<h5>363</h5>
|
||||
<span class="text-muted">Item Stock</span>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5>$73,426</h5>
|
||||
<span class="text-muted">Wallet Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="card ribbon-box right overflow-hidden">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="ribbon ribbon-danger ribbon-shape trending-ribbon"><i class="ri-flashlight-fill text-white align-bottom"></i> <span class="trending-ribbon-text">Trending</span></div>
|
||||
<img src="/assets/images/companies/img-6.png" alt="" height="45">
|
||||
<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Digitech Galaxy</a></h5>
|
||||
<p class="text-muted mb-4">John Roberts</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div id="chart-seller6" data-colors='["--vz-success"]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 border-end-dashed border-end">
|
||||
<h5>412</h5>
|
||||
<span class="text-muted">Item Stock</span>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5>$34,241</h5>
|
||||
<span class="text-muted">Wallet Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="card ribbon-box right overflow-hidden">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="ribbon ribbon-danger ribbon-shape trending-ribbon"><i class="ri-flashlight-fill text-white align-bottom"></i> <span class="trending-ribbon-text">Trending</span></div>
|
||||
<img src="/assets/images/companies/img-7.png" alt="" height="45">
|
||||
<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Syntyce Solutions</a></h5>
|
||||
<p class="text-muted mb-4">Demi Allen</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div id="chart-seller7" data-colors='["--vz-danger"]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 border-end-dashed border-end">
|
||||
<h5>945</h5>
|
||||
<span class="text-muted">Item Stock</span>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5>$17,200</h5>
|
||||
<span class="text-muted">Wallet Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body text-center p-4">
|
||||
<img src="/assets/images/companies/img-8.png" alt="" height="45">
|
||||
<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Zoetic Fashion</a></h5>
|
||||
<p class="text-muted mb-4">James Bowen</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div id="chart-seller8" data-colors='["--vz-warning"]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 border-end-dashed border-end">
|
||||
<h5>784</h5>
|
||||
<span class="text-muted">Item Stock</span>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5>$97,642</h5>
|
||||
<span class="text-muted">Wallet Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row g-0 text-center text-sm-start align-items-center mb-3">
|
||||
<div class="col-sm-6">
|
||||
<div>
|
||||
<p class="mb-sm-0">Showing 1 to 8 of 12 entries</p>
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<ul class="pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
|
||||
<li class="page-item disabled"> <a href="#" class="page-link"><i class="mdi mdi-chevron-left"></i></a> </li>
|
||||
<li class="page-item active"> <a href="#" class="page-link">1</a> </li>
|
||||
<li class="page-item "> <a href="#" class="page-link">2</a> </li>
|
||||
<li class="page-item"> <a href="#" class="page-link">3</a> </li>
|
||||
<li class="page-item"> <a href="#" class="page-link">4</a> </li>
|
||||
<li class="page-item"> <a href="#" class="page-link">5</a> </li>
|
||||
<li class="page-item"> <a href="#" class="page-link"><i class="mdi mdi-chevron-right"></i></a> </li>
|
||||
</ul>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade zoomIn" id="addSeller" tabindex="-1" aria-labelledby="addSellerLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="addSellerLabel">Add Seller</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-content border-0 mt-3">
|
||||
<ul class="nav nav-tabs nav-tabs-custom nav-success p-2 pb-0 bg-light" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#personalDetails" role="tab" aria-selected="true">
|
||||
Personal Details
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#businessDetails" role="tab" aria-selected="false">
|
||||
Business Details
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#bankDetails" role="tab" aria-selected="false">
|
||||
Bank Details
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="personalDetails" role="tabpanel">
|
||||
<form action="#">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="firstnameInput" class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" id="firstnameInput" placeholder="Enter your firstname">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="lastnameInput" class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastnameInput" placeholder="Enter your lastname">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="contactnumberInput" class="form-label">Contact Number</label>
|
||||
<input type="number" class="form-control" id="contactnumberInput" placeholder="Enter your number">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="phonenumberInput" class="form-label">Phone Number</label>
|
||||
<input type="number" class="form-control" id="phonenumberInput" placeholder="Enter your number">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="emailidInput" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="emailidInput" placeholder="Enter your email">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="birthdayidInput" class="form-label">Date of Birth</label>
|
||||
<input type="text" id="birthdayidInput" class="form-control" data-provider="flatpickr" placeholder="Enter your date of birth">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label for="cityidInput" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="cityidInput" placeholder="Enter your city">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label for="countryidInput" class="form-label">Country</label>
|
||||
<input type="text" class="form-control" id="countryidInput" placeholder="Enter your country">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label for="zipcodeidInput" class="form-label">Zip Code</label>
|
||||
<input type="text" class="form-control" id="zipcodeidInput" placeholder="Enter your zipcode">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlTextarea1" class="form-label">Description</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Enter description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button class="btn btn-link link-success text-decoration-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button type="submit" class="btn btn-primary"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<div class="tab-pane" id="businessDetails" role="tabpanel">
|
||||
<form action="#">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label for="companynameInput" class="form-label">Company Name</label>
|
||||
<input type="text" class="form-control" id="companynameInput" placeholder="Enter your company name">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="choices-single-default" class="form-label">Company Type</label>
|
||||
<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default">
|
||||
<option value="">Select type</option>
|
||||
<option value="All" selected>All</option>
|
||||
<option value="Merchandising">Merchandising</option>
|
||||
<option value="Manufacturing">Manufacturing</option>
|
||||
<option value="Partnership">Partnership</option>
|
||||
<option value="Corporation">Corporation</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="pancardInput" class="form-label">Pan Card Number</label>
|
||||
<input type="text" class="form-control" id="pancardInput" placeholder="Enter your pan-card number">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label for="websiteInput" class="form-label">Website</label>
|
||||
<input type="url" class="form-control" id="websiteInput" placeholder="Enter your URL">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label for="faxInput" class="form-label">Fax</label>
|
||||
<input type="text" class="form-control" id="faxInput" placeholder="Enter your fax">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label for="companyemailInput" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="companyemailInput" placeholder="Enter your email">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="worknumberInput" class="form-label">Number</label>
|
||||
<input type="number" class="form-control" id="worknumberInput" placeholder="Enter your number">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="companylogoInput" class="form-label">Company Logo</label>
|
||||
<input type="file" class="form-control" id="companylogoInput">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button class="btn btn-link link-success text-decoration-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button type="submit" class="btn btn-primary"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<div class="tab-pane" id="bankDetails" role="tabpanel">
|
||||
<form action="#">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="banknameInput" class="form-label">Bank Name</label>
|
||||
<input type="text" class="form-control" id="banknameInput" placeholder="Enter your bank name">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="branchInput" class="form-label">Branch</label>
|
||||
<input type="text" class="form-control" id="branchInput" placeholder="Branch">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label for="accountnameInput" class="form-label">Account Holder Name</label>
|
||||
<input type="text" class="form-control" id="accountnameInput" placeholder="Enter account holder name">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="accountnumberInput" class="form-label">Account Number</label>
|
||||
<input type="number" class="form-control" id="accountnumberInput" placeholder="Enter account number">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="ifscInput" class="form-label">IFSC</label>
|
||||
<input type="number" class="form-control" id="ifscInput" placeholder="IFSC">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button class="btn btn-link link-success text-decoration-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button type="submit" class="btn btn-primary"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- sellers init js -->
|
||||
<script src="/assets/js/pages/sellers.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,488 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Calendar')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Basic Action','Basic Action')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="justify-content-between d-flex align-items-center mt-3 mb-4">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Basic Action</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<table class="body-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
|
||||
valign="top"></td>
|
||||
<td class="container" width="600"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;"
|
||||
valign="top">
|
||||
<div class="content"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action"
|
||||
itemscope itemtype="http://schema.org/ConfirmAction"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; color: #495057; font-size: 14px; vertical-align: top; margin: 0;padding: 30px; box-shadow: 0 3px 15px rgba(30,32,37,.06); ;border-radius: 7px; background-color: #fff;"
|
||||
valign="top">
|
||||
<meta itemprop="name" content="Confirm Email"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
|
||||
<table width="100%" cellpadding="0" cellspacing="0"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
|
||||
valign="top">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<img src="assets/images/logo-dark.png" alt="" height="23">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 20px; line-height: 1.5; font-weight: 500; vertical-align: top; margin: 0; padding: 0 0 10px;"
|
||||
valign="top">
|
||||
Hey, Anna Adame
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; color: #878a99; box-sizing: border-box; line-height: 1.5; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 10px;"
|
||||
valign="top">
|
||||
I'm writing to let you know that I can't attend class for two
|
||||
weeks as I've had an accident and hurt my back. I'm afraid I
|
||||
also need to ask for an extension for next week's essay.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; color: #878a99; box-sizing: border-box; line-height: 1.5; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 24px;"
|
||||
valign="top">
|
||||
Until then, my friend is going to record the lectures so I can
|
||||
listen to them at home. I will try to catch up with all the
|
||||
reading too. However, I don't think I can submit the essay next
|
||||
week. Is it possible to have an extension?
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" itemprop="handler" itemscope
|
||||
itemtype="http://schema.org/HttpActionHandler"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 24px;"
|
||||
valign="top">
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .8125rem;font-weight: 400; color: #FFF; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #0ab39c; margin: 0; border-color: #0ab39c; border-style: solid; border-width: 1px; padding: .5rem .9rem;"
|
||||
onMouseOver="this.style.background='#099885'"
|
||||
onMouseOut="this.style.background='#0ab39c'">Read More
|
||||
→</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0; border-top: 1px solid #e9ebec;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0; padding-top: 15px"
|
||||
valign="top">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img src="assets/images/users/avatar-3.jpg" alt=""
|
||||
height="35" width="35" style="border-radius: 50px;">
|
||||
<div style="margin-left: 8px;">
|
||||
<span style="font-weight: 600;">Luis Rocha</span>
|
||||
<p
|
||||
style="font-size: 13px; margin-bottom: 0px; margin-top: 3px; color: #878a99;">
|
||||
Creative Director</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="text-align: center; margin: 0px auto;">
|
||||
<ul
|
||||
style="list-style: none;display: flex; justify-content: space-evenly; padding-top: 25px;padding-left: 0px; margin-bottom: 20px; font-family: 'Roboto', sans-serif;">
|
||||
<li>
|
||||
<a href="#" style="color: #495057;">Help Center</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="color: #495057;">Support 24/7</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="color: #495057;">Account</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px;color: #98a6ad; margin: 0px;">
|
||||
2022 Velzon. Design & Develop by Themesbrand</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="justify-content-between d-flex align-items-center mt-3 mb-4">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Subscribe Action</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<table class="body-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
|
||||
valign="top"></td>
|
||||
<td class="container" width="600"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;"
|
||||
valign="top">
|
||||
<div class="content"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action"
|
||||
itemscope itemtype="http://schema.org/ConfirmAction"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; color: #495057; font-size: 14px; vertical-align: top; margin: 0;padding: 30px; box-shadow: 0 3px 15px rgba(30,32,37,.06); ;border-radius: 7px; background-color: #fff;"
|
||||
valign="top">
|
||||
<meta itemprop="name" content="Confirm Email"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
|
||||
<table width="100%" cellpadding="0" cellspacing="0"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
|
||||
valign="top">
|
||||
<div style="text-align: center;margin-bottom: 15px;">
|
||||
<img src="assets/images/logo-dark.png" alt="" height="23">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; line-height: 1.5; font-size: 24px; vertical-align: top; margin: 0; padding: 0 0 10px;text-align: center; font-weight: 500;"
|
||||
valign="top">
|
||||
Please confirm subscription
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; color: #878a99; line-height: 1.5; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 24px; text-align: center;"
|
||||
valign="top">
|
||||
Since yesterday, I've been receiving thousands of emails, asking
|
||||
me to confirm the subscription.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" itemprop="handler" itemscope
|
||||
itemtype="http://schema.org/HttpActionHandler"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 24px; text-align: center;"
|
||||
valign="top">
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .8125rem;font-weight: 400; color: #FFF; text-decoration: none;text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #0ab39c; margin: 0; border-color: #0ab39c; border-style: solid; border-width: 1px; padding: .5rem .9rem;"
|
||||
onMouseOver="this.style.background='#099885'"
|
||||
onMouseOut="this.style.background='#0ab39c'">Yes, subscribe
|
||||
me</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0; border-top: 1px solid #e9ebec;">
|
||||
<td class="content-block"
|
||||
style="color: #878a99; text-align: center;font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0; padding-top: 15px"
|
||||
valign="top">
|
||||
If you received this email by mistake, simply delete it. You
|
||||
won't be subscribed if you don't click the confirmation link
|
||||
above.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="text-align: center; margin: 0px auto;">
|
||||
<ul
|
||||
style="list-style: none;display: flex; justify-content: space-evenly; padding-top: 25px;margin-bottom: 20px; padding-left: 0px; font-family: 'Roboto', sans-serif;">
|
||||
<li>
|
||||
<a href="#" style="color: #495057;">Help Center</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="color: #495057;">Support 24/7</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="color: #495057;">Account</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px;color: #98a6ad; margin: 0px;">
|
||||
2022 Velzon. Design & Develop by Themesbrand</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="justify-content-between d-flex align-items-center mt-3 mb-4">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Email Verify Action</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<table class="body-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
|
||||
valign="top"></td>
|
||||
<td class="container" width="600"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;"
|
||||
valign="top">
|
||||
<div class="content"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action"
|
||||
itemscope itemtype="http://schema.org/ConfirmAction"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; color: #495057; font-size: 14px; vertical-align: top; margin: 0;padding: 30px; box-shadow: 0 3px 15px rgba(30,32,37,.06); ;border-radius: 7px; background-color: #fff;"
|
||||
valign="top">
|
||||
<meta itemprop="name" content="Confirm Email"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
|
||||
<table width="100%" cellpadding="0" cellspacing="0"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
|
||||
valign="top">
|
||||
<div style="text-align: center;margin-bottom: 15px;">
|
||||
<img src="assets/images/logo-dark.png" alt="" height="23">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 24px; vertical-align: top; margin: 0; padding: 0 0 10px; text-align: center;"
|
||||
valign="top">
|
||||
<h4
|
||||
style="font-family: 'Roboto', sans-serif; font-weight: 500;">
|
||||
Please Verify your email</h5>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; color: #878a99; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 26px; text-align: center;"
|
||||
valign="top">
|
||||
Yes, we know
|
||||
<p style="margin-bottom: 13px;">An email to verify an email.</p>
|
||||
<p style="margin-bottom: 0;">Please validate your email address
|
||||
in order to get started using product.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" itemprop="handler" itemscope
|
||||
itemtype="http://schema.org/HttpActionHandler"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 22px; text-align: center;"
|
||||
valign="top">
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .8125rem; color: #FFF; text-decoration: none; font-weight: 400; text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #405189; margin: 0; border-color: #405189; border-style: solid; border-width: 1px; padding: .5rem .9rem;">Verify
|
||||
Your Email</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="color: #878a99; text-align: center;font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0; padding-top: 5px"
|
||||
valign="top">
|
||||
<p style="margin-bottom: 10px;">Or verify using this link: </p>
|
||||
<a href="https://themesbrand.com/velzon/"
|
||||
target="_blank">https://themesbrand.com/velzon/</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div
|
||||
style="text-align: center; margin: 25px auto 0px auto;font-family: 'Roboto', sans-serif;">
|
||||
<h4 style="font-weight: 500; line-height: 1.5;font-family: 'Roboto', sans-serif;">
|
||||
Need Help ?</h4>
|
||||
<p style="color: #878a99; line-height: 1.5;">Please send and feedback or bug info to
|
||||
<a href="" style="font-weight: 500;">info@velzon.com</a>
|
||||
</p>
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px;color: #98a6ad; margin: 0px;">
|
||||
2022 Velzon. Design & Develop by Themesbrand</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="justify-content-between d-flex align-items-center mt-3 mb-4">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Password Changes Action</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<table class="body-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
|
||||
valign="top"></td>
|
||||
<td class="container" width="600"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;"
|
||||
valign="top">
|
||||
<div class="content"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action"
|
||||
itemscope itemtype="http://schema.org/ConfirmAction"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; color: #495057; font-size: 14px; vertical-align: top; margin: 0;padding: 30px; box-shadow: 0 3px 15px rgba(30,32,37,.06); ;border-radius: 7px; background-color: #fff;"
|
||||
valign="top">
|
||||
<meta itemprop="name" content="Confirm Email"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
|
||||
<table width="100%" cellpadding="0" cellspacing="0"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
|
||||
valign="top">
|
||||
<div style="text-align: center;">
|
||||
<i data-feather="lock"
|
||||
style="color: #0ab39c;fill: rgba(10,179,156,.16); height: 30px; width: 30px;"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 24px; vertical-align: top; margin: 0; padding: 0 0 10px; text-align: center;"
|
||||
valign="top">
|
||||
<h4
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 0px;font-weight: 500; line-height: 1.5;">
|
||||
Change or reset your password</h5>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; color: #878a99; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 12px; text-align: center;"
|
||||
valign="top">
|
||||
<p style="margin-bottom: 13px; line-height: 1.5;">You can change
|
||||
your password for security reasons or reset it if you forget
|
||||
it. Your Google Account password is used to access many
|
||||
Google products, like Gmail and YouTube.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" itemprop="handler" itemscope
|
||||
itemtype="http://schema.org/HttpActionHandler"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 22px; text-align: center;"
|
||||
valign="top">
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .8125rem; color: #FFF; text-decoration: none; font-weight: 400; text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #405189; margin: 0; border-color: #405189; border-style: solid; border-width: 1px; padding: .5rem .9rem;">Reset
|
||||
Password</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="color: #878a99; font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0; padding-top: 5px"
|
||||
valign="top">
|
||||
<h5
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 5px;font-weight: 500; line-height: 1.5;font-size: 15px;">
|
||||
Change your password</h5>
|
||||
<ul
|
||||
style="margin-bottom: 0px;gap: 0.5rem; flex: 1 1 auto;display: flex;flex-direction: column;align-self: stretch;">
|
||||
<li>
|
||||
Open your account. You might need to sign in.
|
||||
</li>
|
||||
<li>
|
||||
Under "Security," select Signing in to Google.
|
||||
</li>
|
||||
<li>
|
||||
Choose Password. You might need to sign in again.
|
||||
</li>
|
||||
<li>
|
||||
Enter your new password, then select Change Password.
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="text-align: center; margin: 28px auto 0px auto;">
|
||||
<h4>Need Help ?</h4>
|
||||
<p style="color: #878a99;">Please send and feedback or bug info to <a href=""
|
||||
style="font-weight: 500px;">info@velzon.com</a></p>
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px;color: #98a6ad; margin: 0px;">
|
||||
2022 Velzon. Design & Develop by Themesbrand</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,502 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Invoice Action')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Ecommerce Action','Email')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="justify-content-between d-flex align-items-center mt-3 mb-4">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Invoice Action </h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<table class="body-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
|
||||
valign="top"></td>
|
||||
<td class="container" width="600"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;"
|
||||
valign="top">
|
||||
<div class="content"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action"
|
||||
itemscope itemtype="http://schema.org/ConfirmAction"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; color: #495057; font-size: 14px; vertical-align: top; margin: 0;padding: 30px; box-shadow: 0 3px 15px rgba(30,32,37,.06); ;border-radius: 7px; background-color: #fff;"
|
||||
valign="top">
|
||||
<meta itemprop="name" content="Confirm Email"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
|
||||
<table width="100%" cellpadding="0" cellspacing="0"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 24px; vertical-align: top; margin: 0; padding: 0 0 10px; text-align: center;"
|
||||
valign="top">
|
||||
<h4
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 10px; font-weight: 600;">
|
||||
Your order has been placed</h5>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 12px;"
|
||||
valign="top">
|
||||
<h5
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 3px;">
|
||||
Hey, Anna Adame</h5>
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 8px; color: #878a99;">
|
||||
Your order has been confirmed and will be shipping soon.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 18px;"
|
||||
valign="top">
|
||||
<table style="width:100%;">
|
||||
<tbody>
|
||||
<tr style="text-align: left;">
|
||||
<th style="padding: 5px;">
|
||||
<p
|
||||
style="color: #878a99; font-size: 13px; margin-bottom: 2px; font-weight: 400;">
|
||||
Order Number</p>
|
||||
<span>VZ14524742541</span>
|
||||
</th>
|
||||
<th style="padding: 5px;">
|
||||
<p
|
||||
style="color: #878a99; font-size: 13px; margin-bottom: 2px; font-weight: 400;">
|
||||
Order Date</p>
|
||||
<span>05 April, 2022</span>
|
||||
</th>
|
||||
<th style="padding: 5px;">
|
||||
<p
|
||||
style="color: #878a99; font-size: 13px; margin-bottom: 2px; font-weight: 400;">
|
||||
Payment Method</p>
|
||||
<span>Viss - 4622</span>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 12px;"
|
||||
valign="top">
|
||||
<h6
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 15px; text-decoration-line: underline;margin-bottom: 15px;">
|
||||
Her'e what you ordered:</h6>
|
||||
<table style="width:100%;" cellspacing="0" cellpadding="0">
|
||||
<thead style="text-align: left;">
|
||||
<tr>
|
||||
<th
|
||||
style="padding: 8px;border-bottom: 1px solid #e9ebec;">
|
||||
Product Details</th>
|
||||
<th
|
||||
style="padding: 8px;border-bottom: 1px solid #e9ebec;">
|
||||
Quantity</th>
|
||||
<th
|
||||
style="padding: 8px;border-bottom: 1px solid #e9ebec;">
|
||||
Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 8px; font-size: 13px;">
|
||||
<h6
|
||||
style="margin-bottom: 2px; font-size: 14px;">
|
||||
Sweatshirt for Men (Pink)</h6>
|
||||
<p
|
||||
style="margin-bottom: 2px; font-size: 13px; color: #878a99;">
|
||||
Graphic Print Men & Women Sweatshirt</p>
|
||||
</td>
|
||||
<td style="padding: 8px; font-size: 13px;">
|
||||
02
|
||||
</td>
|
||||
<td style="padding: 8px; font-size: 13px;">
|
||||
$239.98
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 8px; font-size: 13px;">
|
||||
<h6
|
||||
style="margin-bottom: 2px; font-size: 14px;">
|
||||
Noise NoiseFit Endure Smart Watch</h6>
|
||||
<p
|
||||
style="margin-bottom: 2px; font-size: 13px; color: #878a99;">
|
||||
32.5mm (1.28 Inch) TFT Color Touch Display
|
||||
</p>
|
||||
</td>
|
||||
<td style="padding: 8px; font-size: 13px;">
|
||||
01
|
||||
</td>
|
||||
<td style="padding: 8px; font-size: 13px;">
|
||||
$94.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"
|
||||
style="padding: 8px; font-size: 13px; text-align: end;border-top: 1px solid #e9ebec;">
|
||||
Subtotal
|
||||
</td>
|
||||
<th
|
||||
style="padding: 8px; font-size: 13px;border-top: 1px solid #e9ebec;">
|
||||
$334.97
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"
|
||||
style="padding: 8px; font-size: 13px; text-align: end;">
|
||||
Shipping Charge
|
||||
</td>
|
||||
<th style="padding: 8px; font-size: 13px;">
|
||||
$9.50
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"
|
||||
style="padding: 8px; font-size: 13px; text-align: end;">
|
||||
Taxs
|
||||
</td>
|
||||
<th style="padding: 8px; font-size: 13px;">
|
||||
$15.26
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"
|
||||
style="padding: 8px; font-size: 13px; text-align: end;">
|
||||
Discount
|
||||
</td>
|
||||
<th style="padding: 8px; font-size: 13px;">
|
||||
$20.78
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"
|
||||
style="padding: 8px; font-size: 13px; text-align: end;border-top: 1px solid #e9ebec;">
|
||||
Total Amount
|
||||
</td>
|
||||
<th
|
||||
style="padding: 8px; font-size: 13px;border-top: 1px solid #e9ebec;">
|
||||
$338.95
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 0px;"
|
||||
valign="top">
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 8px; color: #878a99;">
|
||||
Wl'll send you shipping confirmation when your item(s) are
|
||||
on the way! We appreciate your business, and hope you enjoy
|
||||
your purchase.</p>
|
||||
<h6
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px; margin-bottom: 0px; text-align: end;">
|
||||
Thank you!</h6>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="margin-top: 32px; text-align: center;">
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .8125rem; color: #FFF; text-decoration: none; font-weight: 400; text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #405189; margin: 0; border-color: #405189; border-style: solid; border-width: 1px; padding: .5rem .9rem;">Download</a>
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .8125rem; color: #FFF; text-decoration: none; font-weight: 400; text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #0ab39c; margin: 0; border-color: #0ab39c; border-style: solid; border-width: 1px; padding: .5rem .9rem;">Back
|
||||
to Shop</a>
|
||||
</div>
|
||||
<div style="text-align: center; margin: 28px auto 0px auto;">
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px;color: #98a6ad; margin: 0px;">
|
||||
2022 Velzon. Design & Develop by Themesbrand</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="justify-content-between d-flex align-items-center mt-3 mb-4">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Feedback Action</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<table class="body-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
|
||||
valign="top"></td>
|
||||
<td class="container" width="600"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;"
|
||||
valign="top">
|
||||
<div class="content"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action"
|
||||
itemscope itemtype="http://schema.org/ConfirmAction"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; color: #495057; font-size: 14px; vertical-align: top; margin: 0;padding: 30px; box-shadow: 0 3px 15px rgba(30,32,37,.06); ;border-radius: 7px; background-color: #fff;"
|
||||
valign="top">
|
||||
<meta itemprop="name" content="Confirm Email"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
|
||||
<table width="100%" cellpadding="0" cellspacing="0"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 22px; vertical-align: top; margin: 0; padding: 0 0 3px; text-align: center;"
|
||||
valign="top">
|
||||
<div style="color: #f7b84b;">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0;"
|
||||
valign="top">
|
||||
<h3
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 18px; text-align: center;line-height: 1.5;">
|
||||
Good design & good support. Go for it</h5>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 15px; vertical-align: top; margin: 0; padding: 0 0 0px;"
|
||||
valign="top">
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 8px; color: #878a99;line-height: 1.5;">
|
||||
Dear valuable Customer,</p>
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 8px; color: #878a99;line-height: 1.5;">
|
||||
Thank you so much for providing 5 stars review It really
|
||||
means a lot to us. Your review motivates us to work even
|
||||
hard and provide top-notch features, support, and updates.
|
||||
You can share more details via the contact us so we can
|
||||
provide the best from our side in future updates. We are
|
||||
going to release the Vue and React version asap.</p>
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; margin-bottom: 8px; color: #878a99;line-height: 1.5;">
|
||||
Feel free to get in touch with us anytime via support from
|
||||
the link below. <a
|
||||
href="https://themeforest.net/item/velzon-aspnet-core-admin-dashboard-template/36077495/support"
|
||||
target="_blank">https://themeforest.net/item/velzon-aspnet-core-admin-dashboard-template/36077495/support</a>
|
||||
</p>
|
||||
<h6
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px; margin-bottom: 0px; text-align: end;">
|
||||
Thank you!</h6>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="text-align: center; margin: 28px auto 0px auto;">
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px;color: #98a6ad; margin: 0px;">
|
||||
2022 Velzon. Design & Develop by Themesbrand</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table><!-- end table -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="justify-content-between d-flex align-items-center mt-3 mb-4">
|
||||
<h5 class="mb-0 pb-1 text-decoration-underline">Rating and Review Email Template</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12">
|
||||
<table class="body-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
|
||||
valign="top"></td>
|
||||
<td class="container" width="600"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;"
|
||||
valign="top">
|
||||
<div class="content"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action"
|
||||
itemscope itemtype="http://schema.org/ConfirmAction"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; color: #495057; font-size: 14px; vertical-align: top; margin: 0;box-shadow: 0 3px 15px rgba(30,32,37,.06); ;border-radius: 7px; background-color: #fff;overflow: hidden;"
|
||||
valign="top">
|
||||
<meta itemprop="name" content="Confirm Email"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
|
||||
<div
|
||||
style="padding: 20px;box-sizing: border-box; text-align: center; background-image: linear-gradient(to right, #405189, #405189);">
|
||||
<h6
|
||||
style="font-family: 'Roboto', sans-serif;margin: 0; font-size: 15px;color: #fff;text-transform: uppercase;">
|
||||
FREE 1-2 day shipping on orders over $32</h6>
|
||||
</div>
|
||||
<div
|
||||
style="padding: 20px;box-sizing: border-box; text-align: center; border-bottom: 1px solid #e9ebec;">
|
||||
<img src="assets/images/logo-dark.png" alt="" height="23">
|
||||
</div>
|
||||
<div style="padding: 20px;box-sizing: border-box; text-align: center;">
|
||||
<h5
|
||||
style="font-family: 'Roboto', sans-serif;margin-bottom: 10px;font-weight: 500;">
|
||||
What did you think of your recent purchase?</h5>
|
||||
<div style="color: #f7b84b;font-size: 17px;">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
</div>
|
||||
<p
|
||||
style="font-size: 14px;color: #98a6ad;border-bottom: 1px solid #e9ebec;padding-bottom: 18px;">
|
||||
We'd love to hear how you and your pet enjoyed these products.
|
||||
Please leave a reviews so we can share it with other pet parents
|
||||
just like you.</p>
|
||||
|
||||
<table style="width:100%;font-family: 'Roboto', sans-serif;">
|
||||
<tbody>
|
||||
<tr style="text-align: left;">
|
||||
<th style="padding: 5px;width: 110px;">
|
||||
<img src="assets/images/products/img-3.png" alt=""
|
||||
height="80">
|
||||
</th>
|
||||
<th style="padding: 5px;">
|
||||
<h6
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px; margin-bottom: 2px; font-weight: 500;">
|
||||
350 ml Glass Grocery Container</h6>
|
||||
<p
|
||||
style="color: #878a99; font-weight: 400;margin-bottom: 5px;line-height: 1.5;font-size: 12px;">
|
||||
Category : Grocery</p>
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .710rem;font-weight: 400; color: #FFF; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #0ab39c; margin: 0; border-color: #0ab39c; border-style: solid; border-width: 1px; padding: .25rem .5rem;"
|
||||
onMouseOver="this.style.background='#099885'"
|
||||
onMouseOut="this.style.background='#0ab39c'">Write a
|
||||
Review →</a>
|
||||
</th>
|
||||
</tr>
|
||||
<tr style="text-align: left;">
|
||||
<th style="padding: 5px;width: 110px;">
|
||||
<img src="assets/images/products/img-2.png" alt=""
|
||||
height="80">
|
||||
</th>
|
||||
<th style="padding: 5px;">
|
||||
<h6
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px; margin-bottom: 2px; font-weight: 500;">
|
||||
Urban Ladder Pashe Chair</h6>
|
||||
<p
|
||||
style="color: #878a99; font-weight: 400;margin-bottom: 5px;line-height: 1.5;font-size: 12px;">
|
||||
Category : Furniture</p>
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .710rem;font-weight: 400; color: #FFF; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #0ab39c; margin: 0; border-color: #0ab39c; border-style: solid; border-width: 1px; padding: .25rem .5rem;"
|
||||
onMouseOver="this.style.background='#099885'"
|
||||
onMouseOut="this.style.background='#0ab39c'">Write a
|
||||
Review →</a>
|
||||
</th>
|
||||
</tr>
|
||||
<tr style="text-align: left;">
|
||||
<th style="padding: 5px;width: 110px;">
|
||||
<img src="assets/images/products/img-1.png" alt=""
|
||||
height="80">
|
||||
</th>
|
||||
<th style="padding: 5px;">
|
||||
<h6
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px; margin-bottom: 2px; font-weight: 500;">
|
||||
Half Sleeve Round Neck T-Shirts</h6>
|
||||
<p
|
||||
style="color: #878a99; font-weight: 400;margin-bottom: 5px;line-height: 1.5;font-size: 12px;">
|
||||
Category : Fashion</p>
|
||||
<a href="#" itemprop="url"
|
||||
style="font-family: 'Roboto', sans-serif; box-sizing: border-box; font-size: .710rem;font-weight: 400; color: #FFF; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; border-radius: .25rem; text-transform: capitalize; background-color: #0ab39c; margin: 0; border-color: #0ab39c; border-style: solid; border-width: 1px; padding: .25rem .5rem;"
|
||||
onMouseOver="this.style.background='#099885'"
|
||||
onMouseOut="this.style.background='#0ab39c'">Write a
|
||||
Review →</a>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
style="padding: 20px;box-sizing: border-box; text-align: center; background-color: rgba(240,101,72,.1);">
|
||||
<h6
|
||||
style="font-family: 'Roboto', sans-serif;margin: 0; font-size: 15px;text-transform: uppercase;color: #f06548;">
|
||||
Call us 24/7 at 1-2345-678-9123</h6>
|
||||
</div>
|
||||
<div style="padding: 20px;box-sizing: border-box; text-align: center;">
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif;margin-bottom: 0px;font-weight: 500;color: #98a6ad;">
|
||||
Review text is a text that contains reviews, ratings or reviews of a
|
||||
work such as a film, drama, or a book.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="text-align: center; margin: 28px auto 0px auto;">
|
||||
<p
|
||||
style="font-family: 'Roboto', sans-serif; font-size: 14px;color: #98a6ad; margin: 0px;">
|
||||
2022 Velzon. Design & Develop by Themesbrand</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div><!-- end row -->
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,680 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('File Manager')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
|
||||
<div class="chat-wrapper d-lg-flex gap-1 mx-n4 mt-n4 p-1">
|
||||
<div class="file-manager-sidebar">
|
||||
<div class="p-3 d-flex flex-column h-100">
|
||||
<div class="mb-3">
|
||||
<h5 class="mb-0 fw-semibold">My Drive</h5>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control bg-light border-light" placeholder="Search here...">
|
||||
<i class="ri-search-2-line search-icon"></i>
|
||||
</div>
|
||||
<div class="mt-3 mx-n4 px-4 file-menu-sidebar-scroll" data-simplebar>
|
||||
<ul class="list-unstyled file-manager-menu">
|
||||
<li>
|
||||
<a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true"
|
||||
aria-controls="collapseExample">
|
||||
<i class="ri-folder-2-line align-bottom me-2"></i> <span class="file-list-link">My
|
||||
Drive</span>
|
||||
</a>
|
||||
<div class="collapse show" id="collapseExample">
|
||||
<ul class="sub-menu list-unstyled">
|
||||
<li>
|
||||
<a href="#!">Assets</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Marketing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Personal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Templates</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i class="ri-file-list-2-line align-bottom me-2"></i> <span
|
||||
class="file-list-link">Documents</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i class="ri-image-2-line align-bottom me-2"></i> <span
|
||||
class="file-list-link">Media</span></a>
|
||||
<li>
|
||||
<a href="#!"><i class="ri-history-line align-bottom me-2"></i> <span
|
||||
class="file-list-link">Recents</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i class="ri-star-line align-bottom me-2"></i> <span
|
||||
class="file-list-link">Important</span></a>
|
||||
</li>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i class="ri-delete-bin-line align-bottom me-2"></i> <span
|
||||
class="file-list-link">Deleted</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-auto">
|
||||
<h6 class="fs-11 text-muted text-uppercase mb-3">Storage Status</h6>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="ri-database-2-line fs-17"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3 overflow-hidden">
|
||||
<div class="progress mb-2 progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%"
|
||||
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<span class="text-muted fs-12 d-block text-truncate"><b>47.52</b>GB used of
|
||||
<b>119</b>GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-manager-content w-100 p-3 py-0">
|
||||
<div class="mx-n3 pt-4 px-4 file-manager-content-scroll" data-simplebar>
|
||||
<div id="folder-list" class="mb-2">
|
||||
<div class="row justify-content-beetwen g-2 mb-3">
|
||||
|
||||
<div class="col">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-2 d-block d-lg-none">
|
||||
<button type="button"
|
||||
class="btn btn-soft-success btn-icon btn-sm fs-16 file-menu-btn">
|
||||
<i class="ri-menu-2-fill align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-16 mb-0">Folders</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-auto">
|
||||
<div class="d-flex gap-2 align-items-start">
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
name="choices-single-default" id="file-type">
|
||||
<option value="">File Type</option>
|
||||
<option value="All" selected>All</option>
|
||||
<option value="Video">Video</option>
|
||||
<option value="Images">Images</option>
|
||||
<option value="Music">Music</option>
|
||||
<option value="Documents">Documents</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-success w-sm create-folder-modal flex-shrink-0"
|
||||
data-bs-toggle="modal" data-bs-target="#createFolderModal"><i
|
||||
class="ri-add-line align-bottom me-1"></i> Create Folders</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<div class="row" id="folderlist-data">
|
||||
<div class="col-xxl-3 col-6 folder-card">
|
||||
<div class="card bg-light shadow-none" id="folder-1">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-1">
|
||||
<div class="form-check form-check-danger mb-3 fs-15 flex-grow-1">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="folderlistCheckbox_1" checked>
|
||||
<label class="form-check-label" for="folderlistCheckbox_1"></label>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-primary btn-icon btn-sm dropdown"
|
||||
type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-2-fill fs-16 align-bottom"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn"
|
||||
href="javascript:void(0);">Open</a></li>
|
||||
<li><a class="dropdown-item edit-folder-list"
|
||||
href="#createFolderModal" data-bs-toggle="modal"
|
||||
role="button">Rename</a></li>
|
||||
<li><a class="dropdown-item" href="#removeFolderModal"
|
||||
data-bs-toggle="modal" role="button">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<i class="ri-folder-2-fill align-bottom text-warning display-5"></i>
|
||||
</div>
|
||||
<h6 class="fs-15 folder-name">Projects</h6>
|
||||
</div>
|
||||
<div class="hstack mt-4 text-muted">
|
||||
<span class="me-auto"><b>349</b> Files</span>
|
||||
<span><b>4.10</b>GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-6 folder-card">
|
||||
<div class="card bg-light shadow-none" id="folder-2">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-1">
|
||||
<div class="form-check form-check-danger mb-3 fs-15 flex-grow-1">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="folderlistCheckbox_2">
|
||||
<label class="form-check-label" for="folderlistCheckbox_2"></label>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-primary btn-icon btn-sm dropdown"
|
||||
type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-2-fill fs-16 align-bottom"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn"
|
||||
href="javascript:void(0);">Open</a></li>
|
||||
<li><a class="dropdown-item edit-folder-list"
|
||||
href="#createFolderModal" data-bs-toggle="modal"
|
||||
role="button">Rename</a></li>
|
||||
<li><a class="dropdown-item" href="#removeFolderModal"
|
||||
data-bs-toggle="modal" role="button">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<i class="ri-folder-2-fill align-bottom text-warning display-5"></i>
|
||||
</div>
|
||||
<h6 class="fs-15 folder-name">Documents</h6>
|
||||
</div>
|
||||
<div class="hstack mt-4 text-muted">
|
||||
<span class="me-auto"><b>2348</b> Files</span>
|
||||
<span><b>27.01</b>GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-6 folder-card">
|
||||
<div class="card bg-light shadow-none" id="folder-3">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-1">
|
||||
<div class="form-check form-check-danger mb-3 fs-15 flex-grow-1">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="folderlistCheckbox_3">
|
||||
<label class="form-check-label" for="folderlistCheckbox_3"></label>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-primary btn-icon btn-sm dropdown"
|
||||
type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-2-fill fs-16 align-bottom"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn"
|
||||
href="javascript:void(0);">Open</a></li>
|
||||
<li><a class="dropdown-item edit-folder-list"
|
||||
href="#createFolderModal" data-bs-toggle="modal"
|
||||
role="button">Rename</a></li>
|
||||
<li><a class="dropdown-item" href="#removeFolderModal"
|
||||
data-bs-toggle="modal" role="button">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<i class="ri-folder-2-fill align-bottom text-warning display-5"></i>
|
||||
</div>
|
||||
<h6 class="fs-15 folder-name">Media</h6>
|
||||
</div>
|
||||
<div class="hstack mt-4 text-muted">
|
||||
<span class="me-auto"><b>12480</b> Files</span>
|
||||
<span><b>20.87</b>GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-6 folder-card">
|
||||
<div class="card bg-light shadow-none" id="folder-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-1">
|
||||
<div class="form-check form-check-danger mb-3 fs-15 flex-grow-1">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="folderlistCheckbox_4" checked>
|
||||
<label class="form-check-label" for="folderlistCheckbox_4"></label>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-primary btn-icon btn-sm dropdown"
|
||||
type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-2-fill fs-16 align-bottom"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn"
|
||||
href="javascript:void(0);">Open</a></li>
|
||||
<li><a class="dropdown-item edit-folder-list"
|
||||
href="#createFolderModal" data-bs-toggle="modal"
|
||||
role="button">Rename</a></li>
|
||||
<li><a class="dropdown-item" href="#removeFolderModal"
|
||||
data-bs-toggle="modal" role="button">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<i class="ri-folder-2-fill align-bottom text-warning display-5"></i>
|
||||
</div>
|
||||
<h6 class="fs-15 folder-name">Velzon v1.7.0</h6>
|
||||
</div>
|
||||
<div class="hstack mt-4 text-muted">
|
||||
<span class="me-auto"><b>180</b> Files</span>
|
||||
<span><b>478.65</b>MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<h5 class="flex-grow-1 fs-16 mb-0" id="filetype-title">Recent File</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<button class="btn btn-success createFile-modal" data-bs-toggle="modal"
|
||||
data-bs-target="#createFileModal"><i class="ri-add-line align-bottom me-1"></i>
|
||||
Create File</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle table-nowrap mb-0">
|
||||
<thead class="table-active">
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">File Item</th>
|
||||
<th scope="col">File Size</th>
|
||||
<th scope="col">Recent Date</th>
|
||||
<th scope="col" class="text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="file-list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ul id="pagination" class="pagination pagination-lg"></ul>
|
||||
<div class="align-items-center mt-2 row g-3 text-center text-sm-start">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">Showing<span class="fw-semibold">4</span> of <span
|
||||
class="fw-semibold">125</span> Results
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<ul
|
||||
class="pagination pagination-separated pagination-sm justify-content-center justify-content-sm-start mb-0">
|
||||
<li class="page-item disabled">
|
||||
<a href="#" class="page-link">←</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">→</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-manager-detail-content p-3 py-0">
|
||||
<div class="mx-n3 pt-3 px-3 file-detail-content-scroll" data-simplebar>
|
||||
<div id="folder-overview">
|
||||
<div class="d-flex align-items-center pb-3 border-bottom border-bottom-dashed">
|
||||
<h5 class="flex-grow-1 fw-semibold mb-0">Overview</h5>
|
||||
<div>
|
||||
<button type="button"
|
||||
class="btn btn-soft-danger btn-icon btn-sm fs-16 close-btn-overview">
|
||||
<i class="ri-close-fill align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="simple_dount_chart"
|
||||
data-colors='["--vz-info", "--vz-danger", "--vz-primary", "--vz-success"]'
|
||||
class="apex-charts mt-3" dir="ltr"></div>
|
||||
<div class="mt-4">
|
||||
<ul class="list-unstyled vstack gap-4">
|
||||
<li>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title rounded bg-soft-secondary text-secondary">
|
||||
<i class="ri-file-text-line fs-17"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="mb-1 fs-15">Documents</h5>
|
||||
<p class="mb-0 fs-12 text-muted">2348 files</p>
|
||||
</div>
|
||||
<b>27.01 GB</b>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title rounded bg-soft-success text-success">
|
||||
<i class="ri-gallery-line fs-17"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="mb-1 fs-15">Media</h5>
|
||||
<p class="mb-0 fs-12 text-muted">12480 files</p>
|
||||
</div>
|
||||
<b>20.87 GB</b>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title rounded bg-soft-warning text-warning">
|
||||
<i class="ri-folder-2-line fs-17"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="mb-1 fs-15">Projects</h5>
|
||||
<p class="mb-0 fs-12 text-muted">349 files</p>
|
||||
</div>
|
||||
<b>4.10 GB</b>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title rounded bg-soft-primary text-primary">
|
||||
<i class="ri-error-warning-line fs-17"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="mb-1 fs-15">Others</h5>
|
||||
<p class="mb-0 fs-12 text-muted">9873 files</p>
|
||||
</div>
|
||||
<b>33.54 GB</b>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pb-3 mt-auto">
|
||||
<div class="alert alert-danger d-flex align-items-center mb-0">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="ri-cloud-line text-danger align-bottom display-5"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="text-danger fs-14">Upgrade to Pro</h5>
|
||||
<p class="text-muted mb-2">Get more space for your...</p>
|
||||
<button class="btn btn-sm btn-danger"><i
|
||||
class="ri-upload-cloud-line align-bottom"></i> Upgrade Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="file-overview" class="h-100">
|
||||
<div class="d-flex h-100 flex-column">
|
||||
<div class="d-flex align-items-center pb-3 border-bottom border-bottom-dashed mb-3 gap-2">
|
||||
<h5 class="flex-grow-1 fw-semibold mb-0">File Preview</h5>
|
||||
<div>
|
||||
<button type="button"
|
||||
class="btn btn-ghost-primary btn-icon btn-sm fs-16 favourite-btn">
|
||||
<i class="ri-star-fill align-bottom"></i>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-soft-danger btn-icon btn-sm fs-16 close-btn-overview">
|
||||
<i class="ri-close-fill align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-3 border-bottom border-bottom-dashed mb-3">
|
||||
<div
|
||||
class="file-details-box bg-light p-3 text-center rounded-3 border border-light mb-3">
|
||||
<div class="display-4 file-icon">
|
||||
<i class="ri-file-text-fill text-secondary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-success float-end fs-16"><i
|
||||
class="ri-share-forward-line"></i></button>
|
||||
<h5 class="fs-16 mb-1 file-name">html.docx</h5>
|
||||
<p class="text-muted mb-0 fs-12"><span class="file-size">0.3 KB</span>, <span
|
||||
class="create-date">19 Apr, 2022</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="fs-12 text-uppercase text-muted mb-3">File Description :</h5>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-borderless table-nowrap table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" style="width: 35%;">File Name :</th>
|
||||
<td class="file-name">html.docx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">File Type :</th>
|
||||
<td class="file-type">Documents</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Size :</th>
|
||||
<td class="file-size">0.3 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Created :</th>
|
||||
<td class="create-date">19 Apr, 2022</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Path :</th>
|
||||
<td class="file-path">
|
||||
<div class="user-select-all text-truncate">
|
||||
*:\projects\src\assets\images</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="fs-12 text-uppercase text-muted mb-3">Share Information:</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-borderless table-nowrap table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" style="width: 35%;">Share Name :</th>
|
||||
<td class="share-name">\\*\Projects</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Share Path :</th>
|
||||
<td class="share-path">velzon:\Documents\</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto border-top border-top-dashed py-3">
|
||||
<div class="hstack gap-2">
|
||||
<button type="button" class="btn btn-soft-primary w-100"><i
|
||||
class="ri-download-2-line align-bottom me-1"></i> Download</button>
|
||||
<button type="button" class="btn btn-soft-danger w-100 remove-file-overview"
|
||||
data-remove-id="" data-bs-toggle="modal"
|
||||
data-bs-target="#removeFileItemModal"><i
|
||||
class="ri-close-fill align-bottom me-1"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
<!-- START CREATE FOLDER MODAL -->
|
||||
<div class="modal fade zoomIn" id="createFolderModal" tabindex="-1" aria-labelledby="createFolderModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header p-3 bg-soft-success">
|
||||
<h5 class="modal-title" id="createFolderModalLabel">Create Folder</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" id="addFolderBtn-close"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form autocomplete="off" class="needs-validation createfolder-form" id="createfolder-form"
|
||||
novalidate>
|
||||
<div class="mb-4">
|
||||
<label for="foldername-input" class="form-label">Folder Name</label>
|
||||
<input type="text" class="form-control" id="foldername-input" required
|
||||
placeholder="Enter folder name">
|
||||
<div class="invalid-feedback">Please enter a folder name.</div>
|
||||
<input type="hidden" class="form-control" id="folderid-input" value=""
|
||||
placeholder="Enter folder name">
|
||||
</div>
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-ghost-success" data-bs-dismiss="modal"><i
|
||||
class="ri-close-line align-bottom"></i> Close</button>
|
||||
<button type="submit" class="btn btn-primary" id="addNewFolder">Add Folder</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END CREATE FOLDER MODAL -->
|
||||
|
||||
<!-- START CREATE FILE MODAL -->
|
||||
<div class="modal fade zoomIn" id="createFileModal" tabindex="-1" aria-labelledby="createFileModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header p-3 bg-soft-success">
|
||||
<h5 class="modal-title" id="createFileModalLabel">Create File</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" id="addFileBtn-close"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form autocomplete="off" class="needs-validation createfile-form" id="createfile-form"
|
||||
novalidate>
|
||||
<div class="mb-4">
|
||||
<label for="filename-input" class="form-label">File Name</label>
|
||||
<input type="text" class="form-control" id="filename-input" value="" required
|
||||
placeholder="Enter file name" />
|
||||
<div class="invalid-feedback">Please enter a file name.</div>
|
||||
<input type="hidden" class="form-control" id="fileid-input" value=""
|
||||
placeholder="Enter file name">
|
||||
</div>
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-ghost-success" data-bs-dismiss="modal"><i
|
||||
class="ri-close-line align-bottom"></i> Close</button>
|
||||
<button type="submit" class="btn btn-primary" id="addNewFile">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END CREATE FILE MODAL -->
|
||||
|
||||
<!-- removeFileItemModal -->
|
||||
<div id="removeFileItemModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
|
||||
id="close-removefilemodal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
|
||||
colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this item ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="remove-fileitem">Yes, Delete
|
||||
It!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<!-- removeFileItemModal -->
|
||||
<div id="removeFolderModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
|
||||
id="close-removeFoldermodal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
|
||||
colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this folder ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="remove-folderList">Yes, Delete
|
||||
It!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/file-manager.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,379 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Create Invoice')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- dropzone css -->
|
||||
<link rel="stylesheet" href="/assets/libs/dropzone/dropzone.css" type="text/css" />
|
||||
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Create Invoice','Invoices')"></div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xxl-9">
|
||||
<div class="card">
|
||||
<form class="needs-validation" novalidate id="invoice_form">
|
||||
<div class="card-body border-bottom border-bottom-dashed p-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="profile-user mx-auto mb-3">
|
||||
<input id="profile-img-file-input" type="file" class="profile-img-file-input" />
|
||||
<label for="profile-img-file-input" class="d-block" tabindex="0">
|
||||
<span class="overflow-hidden border border-dashed d-flex align-items-center justify-content-center rounded" style="height: 60px; width: 256px;">
|
||||
<img src="/assets/images/logo-dark.png" class="card-logo card-logo-dark user-profile-image img-fluid" alt="logo dark">
|
||||
<img src="/assets/images/logo-light.png" class="card-logo card-logo-light user-profile-image img-fluid" alt="logo light">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label for="companyAddress">Address</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<textarea class="form-control bg-light border-0" id="companyAddress" rows="3" placeholder="Company Address" required></textarea>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a address
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" class="form-control bg-light border-0" id="companyaddpostalcode" minlength="5" maxlength="6" placeholder="Enter Postal Code" required />
|
||||
<div class="invalid-feedback">
|
||||
The US zip code must contain 5 digits, Ex. 45678
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4 ms-auto">
|
||||
<div class="mb-2">
|
||||
<input type="text" class="form-control bg-light border-0" id="registrationNumber" maxlength="12" placeholder="Legal Registration No" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a registration no, Ex., 012345678912
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input type="email" class="form-control bg-light border-0" id="companyEmail" placeholder="Email Address" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email, Ex., example@gamil.com
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input type="text" class="form-control bg-light border-0" id="companyWebsite" placeholder="Website" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a website, Ex., www.example.com
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone" id="compnayContactno" placeholder="Contact No" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a contact number
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<label for="invoicenoInput">Invoice No</label>
|
||||
<input type="text" class="form-control bg-light border-0" id="invoicenoInput" placeholder="Invoice No" value="#VL25000355" readonly="readonly" />
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div>
|
||||
<label for="date-field">Date</label>
|
||||
<input type="text" class="form-control bg-light border-0" id="date-field" data-provider="flatpickr" data-time="true" placeholder="Select Date-time">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<label for="choices-payment-status">Payment Status</label>
|
||||
<div class="input-light">
|
||||
<select class="form-control bg-light border-0" data-choices data-choices-search-false id="choices-payment-status" required>
|
||||
<option value="">Select Payment Status</option>
|
||||
<option value="Paid">Paid</option>
|
||||
<option value="Unpaid">Unpaid</option>
|
||||
<option value="Refund">Refund</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div>
|
||||
<label for="totalamountInput">Total Amount</label>
|
||||
<input type="text" class="form-control bg-light border-0" id="totalamountInput" placeholder="$0.00" readonly />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div class="card-body p-4 border-top border-top-dashed">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div>
|
||||
<label for="billingName" class="text-muted text-uppercase fw-semibold">Billing
|
||||
Address</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input type="text" class="form-control bg-light border-0" id="billingName" placeholder="Full Name" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a full name
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<textarea class="form-control bg-light border-0" id="billingAddress" rows="3" placeholder="Address" required></textarea>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a address
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone" id="billingPhoneno" placeholder="(123)456-7890" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a phone number
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control bg-light border-0" id="billingTaxno" placeholder="Tax Number" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a tax number
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="same" name="same" onchange="billingFunction()" />
|
||||
<label class="form-check-label" for="same">
|
||||
Will your Billing and Shipping address same?
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-sm-6 ms-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<label for="shippingName" class="text-muted text-uppercase fw-semibold">Shipping
|
||||
Address</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input type="text" class="form-control bg-light border-0" id="shippingName" placeholder="Full Name" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a full name
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<textarea class="form-control bg-light border-0" id="shippingAddress" rows="3" placeholder="Address" required></textarea>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a address
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone" id="shippingPhoneno" placeholder="(123)456-7890" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a phone number
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" class="form-control bg-light border-0" id="shippingTaxno" placeholder="Tax Number" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a tax number
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<div class="table-responsive">
|
||||
<table class="invoice-table table table-borderless table-nowrap mb-0">
|
||||
<thead class="align-middle">
|
||||
<tr class="table-active">
|
||||
<th scope="col" style="width: 50px;">#</th>
|
||||
<th scope="col">
|
||||
Product Details
|
||||
</th>
|
||||
<th scope="col" style="width: 120px;">
|
||||
<div class="d-flex currency-select input-light align-items-center">
|
||||
Rate
|
||||
<select class="form-selectborder-0 bg-light" data-choices data-choices-search-false id="choices-payment-currency" onchange="otherPayment()">
|
||||
<option value="$">($)</option>
|
||||
<option value="£">(£)</option>
|
||||
<option value="₹">(₹)</option>
|
||||
<option value="€">(€)</option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" style="width: 120px;">Quantity</th>
|
||||
<th scope="col" class="text-end" style="width: 150px;">Amount</th>
|
||||
<th scope="col" class="text-end" style="width: 105px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="newlink">
|
||||
<tr id="1" class="product">
|
||||
<th scope="row" class="product-id">1</th>
|
||||
<td class="text-start">
|
||||
<div class="mb-2">
|
||||
<input type="text" class="form-control bg-light border-0" id="productName-1" placeholder="Product Name" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a product name
|
||||
</div>
|
||||
</div>
|
||||
<textarea class="form-control bg-light border-0" id="productDetails-1" rows="2" placeholder="Product Details"></textarea>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" class="form-control product-price bg-light border-0" id="productRate-1" step="0.01" placeholder="0.00" required />
|
||||
<div class="invalid-feedback">
|
||||
Please enter a rate
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="input-step">
|
||||
<button type="button" class='minus'>–</button>
|
||||
<input type="number" class="product-quantity" id="product-qty-1" value="0" readonly>
|
||||
<button type="button" class='plus'>+</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div>
|
||||
<input type="text" class="form-control bg-light border-0 product-line-price" id="productPrice-1" placeholder="$0.00" readonly />
|
||||
</div>
|
||||
</td>
|
||||
<td class="product-removal">
|
||||
<a href="javascript:void(0)" class="btn btn-success">Delete</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr id="newForm" style="display: none;">
|
||||
<td class="d-none" colspan="5">
|
||||
<p>Add New Form</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<a href="javascript:new_link()" id="add-item" class="btn btn-soft-secondary fw-medium"><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-top border-top-dashed mt-2">
|
||||
<td colspan="3"></td>
|
||||
<td colspan="2" class="p-0">
|
||||
<table class="table table-borderless table-sm table-nowrap align-middle mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Sub Total</th>
|
||||
<td style="width:150px;">
|
||||
<input type="text" class="form-control bg-light border-0" id="cart-subtotal" placeholder="$0.00" readonly />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Estimated Tax (12.5%)</th>
|
||||
<td>
|
||||
<input type="text" class="form-control bg-light border-0" id="cart-tax" placeholder="$0.00" readonly />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Discount <small class="text-muted">(VELZON15)</small></th>
|
||||
<td>
|
||||
<input type="text" class="form-control bg-light border-0" id="cart-discount" placeholder="$0.00" readonly />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Shipping Charge</th>
|
||||
<td>
|
||||
<input type="text" class="form-control bg-light border-0" id="cart-shipping" placeholder="$0.00" readonly />
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-top border-top-dashed">
|
||||
<th scope="row">Total Amount</th>
|
||||
<td>
|
||||
<input type="text" class="form-control bg-light border-0" id="cart-total" placeholder="$0.00" readonly />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-2">
|
||||
<label for="choices-payment-type" class="form-label text-muted text-uppercase fw-semibold">Payment
|
||||
Details</label>
|
||||
<div class="input-light">
|
||||
<select class="form-control bg-light border-0" data-choices data-choices-search-false data-choices-removeItem id="choices-payment-type">
|
||||
<option value="">Payment Method</option>
|
||||
<option value="Mastercard">Mastercard</option>
|
||||
<option value="Credit Card">Credit Card</option>
|
||||
<option value="Visa">Visa</option>
|
||||
<option value="Paypal">Paypal</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input class="form-control bg-light border-0" type="text" id="cardholderName" placeholder="Card Holder Name">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input class="form-control bg-light border-0" type="text" id="cardNumber" placeholder="xxxx xxxx xxxx xxxx">
|
||||
</div>
|
||||
<div>
|
||||
<input class="form-control bg-light border-0" type="text" id="amountTotalPay" placeholder="$0.00" readonly />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<div class="mt-4">
|
||||
<label for="exampleFormControlTextarea1" class="form-label text-muted text-uppercase fw-semibold">NOTES</label>
|
||||
<textarea class="form-control alert alert-info" id="exampleFormControlTextarea1" placeholder="Notes" rows="2" required>All accounts are to be paid within 7 days from receipt of invoice. To be paid by cheque or credit card or direct payment online. If account is not paid within 7 days the credits details supplied as confirmation of work undertaken will be charged the agreed quoted fee noted above.</textarea>
|
||||
</div>
|
||||
<div class="hstack gap-2 justify-content-end d-print-none mt-4">
|
||||
<button type="submit" class="btn btn-success"><i class="ri-printer-line align-bottom me-1"></i> Save</button>
|
||||
<a href="javascript:void(0);" class="btn btn-primary"><i class="ri-download-2-line align-bottom me-1"></i> Download Invoice</a>
|
||||
<a href="javascript:void(0);" class="btn btn-secondary"><i class="ri-send-plane-fill align-bottom me-1"></i> Send Invoice</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- dropzone min -->
|
||||
<script src="/assets/libs/dropzone/dropzone-min.js"></script>
|
||||
|
||||
<!-- cleave.js -->
|
||||
<script src="/assets/libs/cleave.js/cleave.min.js"></script>
|
||||
|
||||
<!--Invoice create init js-->
|
||||
<script src="/assets/js/pages/invoicecreate.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,234 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Invoice Details')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Invoice Details','Invoices')"></div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xxl-9">
|
||||
<div class="card" id="demo">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card-header border-bottom-dashed p-4">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<img src="/assets/images/logo-dark.png" class="card-logo card-logo-dark" alt="logo dark" height="17">
|
||||
<img src="/assets/images/logo-light.png" class="card-logo card-logo-light" alt="logo light" height="17">
|
||||
<div class="mt-sm-5 mt-4">
|
||||
<h6 class="text-muted text-uppercase fw-semibold">Address</h6>
|
||||
<p class="text-muted mb-1" id="address-details">California, United States
|
||||
</p>
|
||||
<p class="text-muted mb-0" id="zip-code"><span>Zip-code:</span> 90201</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mt-sm-0 mt-3">
|
||||
<h6><span class="text-muted fw-normal">Legal Registration No:</span><span id="legal-register-no">987654</span></h6>
|
||||
<h6><span class="text-muted fw-normal">Email:</span><span id="email">velzon@themesbrand.com</span></h6>
|
||||
<h6><span class="text-muted fw-normal">Website:</span> <a href="https://themesbrand.com/" class="link-primary" target="_blank" id="website">www.themesbrand.com</a></h6>
|
||||
<h6 class="mb-0"><span class="text-muted fw-normal">Contact No: </span><span id="contact-no"> +(01) 234 6789</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-header-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="card-body p-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-3 col-6">
|
||||
<p class="text-muted mb-2 text-uppercase fw-semibold">Invoice No</p>
|
||||
<h5 class="fs-14 mb-0">#VL<span id="invoice-no">25000355</span></h5>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-3 col-6">
|
||||
<p class="text-muted mb-2 text-uppercase fw-semibold">Date</p>
|
||||
<h5 class="fs-14 mb-0"><span id="invoice-date">23 Nov, 2021</span> <small class="text-muted" id="invoice-time">02:36PM</small></h5>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-3 col-6">
|
||||
<p class="text-muted mb-2 text-uppercase fw-semibold">Payment Status</p>
|
||||
<span class="badge badge-soft-success fs-11" id="payment-status">Paid</span>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-3 col-6">
|
||||
<p class="text-muted mb-2 text-uppercase fw-semibold">Total Amount</p>
|
||||
<h5 class="fs-14 mb-0">$<span id="total-amount">755.96</span></h5>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="card-body p-4 border-top border-top-dashed">
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-3">Billing Address</h6>
|
||||
<p class="fw-medium mb-2" id="billing-name">David Nichols</p>
|
||||
<p class="text-muted mb-1" id="billing-address-line-1">305 S San Gabriel Blvd
|
||||
</p>
|
||||
<p class="text-muted mb-1"><span>Phone: +</span><span id="billing-phone-no">(123) 456-7890</span></p>
|
||||
<p class="text-muted mb-0"><span>Tax: </span><span id="billing-tax-no">12-3456789</span> </p>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-3">Shipping Address</h6>
|
||||
<p class="fw-medium mb-2" id="shipping-name">David Nichols</p>
|
||||
<p class="text-muted mb-1" id="shipping-address-line-1">305 S San Gabriel Blvd
|
||||
</p>
|
||||
<p class="text-muted mb-1"><span>Phone: +</span><span id="shipping-phone-no">(123) 456-7890</span></p>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="card-body p-4">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-borderless text-center table-nowrap align-middle mb-0">
|
||||
<thead>
|
||||
<tr class="table-active">
|
||||
<th scope="col" style="width: 50px;">#</th>
|
||||
<th scope="col">Product Details</th>
|
||||
<th scope="col">Rate</th>
|
||||
<th scope="col">Quantity</th>
|
||||
<th scope="col" class="text-end">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="products-list">
|
||||
<tr>
|
||||
<th scope="row">01</th>
|
||||
<td class="text-start">
|
||||
<span class="fw-medium">Sweatshirt for Men (Pink)</span>
|
||||
<p class="text-muted mb-0">Graphic Print Men & Women Sweatshirt</p>
|
||||
</td>
|
||||
<td>$119.99</td>
|
||||
<td>02</td>
|
||||
<td class="text-end">$239.98</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">02</th>
|
||||
<td class="text-start">
|
||||
<span class="fw-medium">Noise NoiseFit Endure Smart Watch</span>
|
||||
<p class="text-muted mb-0">32.5mm (1.28 Inch) TFT Color Touch
|
||||
Display</p>
|
||||
</td>
|
||||
<td>$94.99</td>
|
||||
<td>01</td>
|
||||
<td class="text-end">$94.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">03</th>
|
||||
<td class="text-start">
|
||||
<span class="fw-medium">350 ml Glass Grocery Container</span>
|
||||
<p class="text-muted mb-0">Glass Grocery Container (Pack of 3,
|
||||
White)</p>
|
||||
</td>
|
||||
<td>$24.99</td>
|
||||
<td>01</td>
|
||||
<td class="text-end">$24.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">04</th>
|
||||
<td class="text-start">
|
||||
<span class="fw-medium">Fabric Dual Tone Living Room Chair</span>
|
||||
<p class="text-muted mb-0">Chair (White)</p>
|
||||
</td>
|
||||
<td>$340.00</td>
|
||||
<td>01</td>
|
||||
<td class="text-end">$340.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</div>
|
||||
<div class="border-top border-top-dashed mt-2">
|
||||
<table class="table table-borderless table-nowrap align-middle mb-0 ms-auto" style="width:250px">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sub Total</td>
|
||||
<td class="text-end">$699.96</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estimated Tax (12.5%)</td>
|
||||
<td class="text-end">$44.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Discount <small class="text-muted">(VELZON15)</small></td>
|
||||
<td class="text-end">- $53.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shipping Charge</td>
|
||||
<td class="text-end">$65.00</td>
|
||||
</tr>
|
||||
<tr class="border-top border-top-dashed fs-15">
|
||||
<th scope="row">Total Amount</th>
|
||||
<th class="text-end">$755.96</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-3">Payment Details:</h6>
|
||||
<p class="text-muted mb-1">Payment Method: <span class="fw-medium" id="payment-method">Mastercard</span></p>
|
||||
<p class="text-muted mb-1">Card Holder: <span class="fw-medium" id="card-holder-name">David Nichols</span></p>
|
||||
<p class="text-muted mb-1">Card Number: <span class="fw-medium" id="card-number">xxx
|
||||
xxxx xxxx 1234</span></p>
|
||||
<p class="text-muted">Total Amount: <span class="fw-medium" id="">$ </span><span id="card-total-amount">755.96</span></p>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="alert alert-info">
|
||||
<p class="mb-0"><span class="fw-semibold">NOTES:</span>
|
||||
<span id="note">All accounts are to be paid within 7 days from receipt of
|
||||
invoice. To be paid by cheque or
|
||||
credit card or direct payment online. If account is not paid within 7
|
||||
days the credits details supplied as confirmation of work undertaken
|
||||
will be charged the agreed quoted fee noted above.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hstack gap-2 justify-content-end d-print-none mt-4">
|
||||
<a href="javascript:window.print()" class="btn btn-secondary"><i class="ri-printer-line align-bottom me-1"></i> Print</a>
|
||||
<a href="javascript:void(0);" class="btn btn-primary"><i class="ri-download-2-line align-bottom me-1"></i> Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<script src="/assets/js/pages/invoicedetails.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,281 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Invoice List')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Invoice List','Invoices')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<!-- card -->
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-uppercase fw-medium text-muted mb-0">Invoices Sent</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h5 class="text-success fs-14 mb-0">
|
||||
<i class="ri-arrow-right-up-line fs-13 align-middle"></i> +89.24 %
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end justify-content-between mt-4">
|
||||
<div>
|
||||
<h4 class="fs-22 fw-semibold ff-secondary mb-4">$<span class="counter-value" data-target="559.25">0</span>k</h4>
|
||||
<span class="badge bg-secondary me-1">2,258</span> <span class="text-muted">Invoices sent</span>
|
||||
</div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-light rounded fs-3">
|
||||
<i data-feather="file-text" class="text-primary icon-dual-primary"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<!-- card -->
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-uppercase fw-medium text-muted mb-0">Paid Invoices</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h5 class="text-danger fs-14 mb-0">
|
||||
<i class="ri-arrow-right-down-line fs-13 align-middle"></i> +8.09 %
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end justify-content-between mt-4">
|
||||
<div>
|
||||
<h4 class="fs-22 fw-semibold ff-secondary mb-4">$<span class="counter-value" data-target="409.66">0</span>k</h4>
|
||||
<span class="badge bg-secondary me-1">1,958</span> <span class="text-muted">Paid by clients</span>
|
||||
</div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-light rounded fs-3">
|
||||
<i data-feather="check-square" class="text-primary icon-dual-primary"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<!-- card -->
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-uppercase fw-medium text-muted mb-0">Unpaid Invoices</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h5 class="text-danger fs-14 mb-0">
|
||||
<i class="ri-arrow-right-down-line fs-13 align-middle"></i> +9.01 %
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end justify-content-between mt-4">
|
||||
<div>
|
||||
<h4 class="fs-22 fw-semibold ff-secondary mb-4">$<span class="counter-value" data-target="136.98">0</span>k</h4>
|
||||
<span class="badge bg-secondary me-1">338</span> <span class="text-muted">Unpaid by clients</span>
|
||||
</div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-light rounded fs-3">
|
||||
<i data-feather="clock" class="text-primary icon-dual-primary"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<!-- card -->
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-uppercase fw-medium text-muted mb-0">Cancelled Invoices</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h5 class="text-success fs-14 mb-0">
|
||||
<i class="ri-arrow-right-up-line fs-13 align-middle"></i> +7.55 %
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end justify-content-between mt-4">
|
||||
<div>
|
||||
<h4 class="fs-22 fw-semibold ff-secondary mb-4">$<span class="counter-value" data-target="84.20">0</span>k</h4>
|
||||
<span class="badge bg-secondary me-1">502</span> <span class="text-muted">Cancelled by clients</span>
|
||||
</div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-light rounded fs-3">
|
||||
<i data-feather="x-octagon" class="text-primary icon-dual-primary"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end col -->
|
||||
</div> <!-- end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="invoiceList">
|
||||
<div class="card-header border-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<h5 class="card-title mb-0 flex-grow-1">Invoices</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
<button class="btn btn-primary" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
<a href="apps-invoices-create.html" class="btn btn-secondary"><i class="ri-add-line align-bottom me-1"></i> Create Invoice</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body bg-soft-light border border-dashed border-start-0 border-end-0">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-xxl-5 col-sm-12">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search bg-light border-light" placeholder="Search for customer, email, country, status or something...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-4">
|
||||
<input type="text" class="form-control bg-light border-light" id="datepicker-range" placeholder="Select date">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-4">
|
||||
<div class="input-light">
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
|
||||
<option value="">Status</option>
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Unpaid">Unpaid</option>
|
||||
<option value="Paid">Paid</option>
|
||||
<option value="Cancel">Cancel</option>
|
||||
<option value="Refund">Refund</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-1 col-sm-4">
|
||||
<button type="button" class="btn btn-primary w-100" onclick="SearchData();">
|
||||
<i class="ri-equalizer-fill me-1 align-bottom"></i> Filters
|
||||
</button>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table align-middle table-nowrap" id="invoiceTable">
|
||||
<thead class="text-muted">
|
||||
<tr>
|
||||
<th scope="col" style="width: 50px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort text-uppercase" data-sort="invoice_id">ID</th>
|
||||
<th class="sort text-uppercase" data-sort="customer_name">Customer</th>
|
||||
<th class="sort text-uppercase" data-sort="email">Email</th>
|
||||
<th class="sort text-uppercase" data-sort="country">Country</th>
|
||||
<th class="sort text-uppercase" data-sort="date">Date</th>
|
||||
<th class="sort text-uppercase" data-sort="invoice_amount">Amount</th>
|
||||
<th class="sort text-uppercase" data-sort="status">Payment Status</th>
|
||||
<th class="sort text-uppercase" data-sort="action">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all" id="invoice-list-data">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px"></lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ invoices We did not find any invoices for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-labelledby="deleteOrderLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body p-5 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
|
||||
<div class="mt-4 text-center">
|
||||
<h4>You are about to delete a order ?</h4>
|
||||
<p class="text-muted fs-15 mb-4">Deleting your order will remove all of your information from our database.</p>
|
||||
<div class="hstack gap-2 justify-content-center remove">
|
||||
<button class="btn btn-link link-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button class="btn btn-danger" id="delete-record">Yes, Delete It</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
|
||||
<!--list pagination js-->
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<!-- invoicelist init js -->
|
||||
<script src="/assets/js/pages/invoiceslist.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,344 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Application')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Application','Jobs')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="applicationList">
|
||||
<div class="card-header border-0">
|
||||
<div class="d-md-flex align-items-center">
|
||||
<h5 class="card-title mb-3 mb-md-0 flex-grow-1">Job Application</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex gap-1 flex-wrap">
|
||||
<button type="button" class="btn btn-primary add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Create Application</button>
|
||||
<button type="button" class="btn btn-secondary"><i class="ri-file-download-line align-bottom me-1"></i> Import</button>
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body border border-dashed border-end-0 border-start-0">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-xxl-5 col-sm-6">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for application ID, company, designation status or something...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-6">
|
||||
<div>
|
||||
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" id="demo-datepicker" placeholder="Select date">
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<div>
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
|
||||
<option value="">Status</option>
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Approved">Approved</option>
|
||||
<option value="New">New</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Rejected">Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<div>
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idType">
|
||||
<option value="">Select Type</option>
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Full Time">Full Time</option>
|
||||
<option value="Part Time">Part Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-1 col-sm-4">
|
||||
<div>
|
||||
<button type="button" class="btn btn-success w-100" onclick="filterData();"> <i class="ri-equalizer-fill me-1 align-bottom"></i>
|
||||
Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div>
|
||||
<ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active All py-3" data-bs-toggle="tab" id="All" href="#" role="tab" aria-selected="true">
|
||||
All Application
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-3 New" data-bs-toggle="tab" id="New" href="#" role="tab" aria-selected="false">
|
||||
New
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-3 Pending" data-bs-toggle="tab" id="Pending" href="#" role="tab" aria-selected="false">
|
||||
Pending <span class="badge bg-danger align-middle ms-1">2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-3 Approved" data-bs-toggle="tab" id="Approved" href="#" role="tab" aria-selected="false">
|
||||
Approved
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-3 Rejected" data-bs-toggle="tab" id="Rejected" href="#" role="tab" aria-selected="false">
|
||||
Rejected
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="table-responsive table-card mb-1">
|
||||
<table class="table table-nowrap align-middle" id="jobListTable">
|
||||
<thead class="text-muted table-light">
|
||||
<tr class="text-uppercase">
|
||||
<th scope="col" style="width: 25px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort" data-sort="id" style="width: 140px;">Application ID</th>
|
||||
<th class="sort" data-sort="company">Company Name</th>
|
||||
<th class="sort" data-sort="designation">Designation</th>
|
||||
<th class="sort" data-sort="date">Apply Date</th>
|
||||
<th class="sort" data-sort="contacts">Contacts</th>
|
||||
<th class="sort" data-sort="type">Type</th>
|
||||
<th class="sort" data-sort="status">Status</th>
|
||||
<th class="sort" data-sort="city">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="checkAll" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id"><a href="#" class="fw-medium link-primary">#VZ001</a></td>
|
||||
<td class="company">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/brands/slack.png" alt="" class="avatar-xxs rounded-circle image_src object-cover">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">Syntyce Solutions</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="designation">Web Designer</td>
|
||||
<td class="date">30 Sep,2022</td>
|
||||
<td class="contacts">785-685-4616</td>
|
||||
<td class="type">Full Time</td>
|
||||
<td class="status"><span class="badge badge-soft-danger text-uppercase">Rejected</span>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="list-inline hstack gap-2 mb-0">
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
|
||||
<a href="/apps-job-details" class="text-primary d-inline-block">
|
||||
<i class="ri-eye-fill fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
|
||||
<a href="#showModal" data-bs-toggle="modal" class="text-primary d-inline-block edit-item-btn">
|
||||
<i class="ri-pencil-fill fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Remove">
|
||||
<a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteOrder">
|
||||
<i class="ri-delete-bin-5-fill fs-16"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted">We've searched more than 150+ result We did not find jobs
|
||||
for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light p-3">
|
||||
<h5 class="modal-title" id="exampleModalLabel"> </h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<form class="tablelist-form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="id-field" />
|
||||
|
||||
<div class="mb-3 d-none" id="modal-id">
|
||||
<label for="applicationId" class="form-label">ID</label>
|
||||
<input type="text" id="applicationId" class="form-control" placeholder="ID" readonly />
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="position-absolute bottom-0 end-0">
|
||||
<label for="companylogo-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
|
||||
<div class="avatar-xs cursor-pointer">
|
||||
<div class="avatar-title bg-light border rounded-circle text-muted">
|
||||
<i class="ri-image-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input class="form-control d-none" value="" id="companylogo-image-input" type="file" accept="image/png, image/gif, image/jpeg">
|
||||
</div>
|
||||
<div class="avatar-lg p-1">
|
||||
<div class="avatar-title bg-light rounded-circle">
|
||||
<img src="/assets/images/users/multi-user.jpg" id="companylogo-img" class="avatar-md h-auto rounded-circle object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="company-field" class="form-label">Company</label>
|
||||
<input type="text" id="company-field" class="form-control" placeholder="Enter company name" required />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="designation-field" class="form-label">Designation</label>
|
||||
<input type="text" id="designation-field" class="form-control" placeholder="Enter designation" required />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="date-field" class="form-label">Apply Date</label>
|
||||
<input type="date" id="date-field" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" required placeholder="Select date" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="contact-field" class="form-label">Contacts</label>
|
||||
<input type="text" id="contact-field" class="form-control" placeholder="Enter contact" required />
|
||||
</div>
|
||||
|
||||
<div class="row gy-4 mb-3">
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="status-input" class="form-label">Status</label>
|
||||
<select class="form-control" data-trigger name="status-input" id="status-input">
|
||||
<option value="">Status</option>
|
||||
<option value="Approved">Approved</option>
|
||||
<option value="New">New</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Rejected">Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="type-input" class="form-label">Type</label>
|
||||
<select class="form-control" data-trigger name="type-input" id="type-input">
|
||||
<option value="">Select Type</option>
|
||||
<option value="Full Time">Full Time</option>
|
||||
<option value="Part Time">Part Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-success" id="add-btn">Add</button>
|
||||
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body p-5 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
|
||||
</lord-icon>
|
||||
<div class="mt-4 text-center">
|
||||
<h4>You are about to delete a order ?</h4>
|
||||
<p class="text-muted fs-15 mb-4">Deleting your order will remove all of your
|
||||
information from our database.</p>
|
||||
<div class="hstack gap-2 justify-content-center remove">
|
||||
<button class="btn btn-link link-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button class="btn btn-danger" id="delete-record">Yes, Delete
|
||||
It</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
|
||||
<!--list pagination js-->
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<!-- ecommerce-order init js -->
|
||||
<script src="/assets/js/pages/job-application.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,77 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Candidate Grid View')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Grid View','Candidate Lists')"></div>
|
||||
|
||||
<div class="row g-4 mb-3">
|
||||
<div class="col-sm-auto">
|
||||
<div>
|
||||
<a href="#!" class="btn btn-primary"><i class="ri-add-line align-bottom me-1"></i> Add Candidate</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="d-md-flex justify-content-sm-end gap-2">
|
||||
<div class="search-box ms-md-2 flex-shrink-0 mb-3 mb-md-0">
|
||||
<input type="text" class="form-control" id="searchJob"
|
||||
placeholder="Search for candidate name or designation..." autocomplete="off">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
|
||||
<select class="form-control w-md" data-choices data-choices-search-false>
|
||||
<option value="All">All</option>
|
||||
<option value="Today">Today</option>
|
||||
<option value="Yesterday" selected>Yesterday</option>
|
||||
<option value="Last 7 Days">Last 7 Days</option>
|
||||
<option value="Last 30 Days">Last 30 Days</option>
|
||||
<option value="This Month">This Month</option>
|
||||
<option value="Last Year">Last Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row job-list-row" id="candidate-list">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row g-0 justify-content-end mb-4" id="pagination-element">
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div
|
||||
class="pagination-block pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-prev">Previous</a>
|
||||
</div>
|
||||
<span id="page-num" class="pagination"></span>
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-next">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- job-candidate-lists js -->
|
||||
<script src="/assets/js/pages/job-candidate-grid.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,77 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Candidate Lists View')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('List View','Candidate Lists')"></div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-sm-auto">
|
||||
<div>
|
||||
<a href="#!" class="btn btn-primary"><i class="ri-add-line align-bottom me-1"></i> Add Candidate</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="d-md-flex justify-content-sm-end gap-2">
|
||||
<div class="search-box ms-md-2 flex-shrink-0 mb-3 mb-md-0">
|
||||
<input type="text" class="form-control" id="searchJob" autocomplete="off"
|
||||
placeholder="Search for candidate name or designation...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
|
||||
<select class="form-control w-md" data-choices data-choices-search-false>
|
||||
<option value="All">All</option>
|
||||
<option value="Today">Today</option>
|
||||
<option value="Yesterday" selected>Yesterday</option>
|
||||
<option value="Last 7 Days">Last 7 Days</option>
|
||||
<option value="Last 30 Days">Last 30 Days</option>
|
||||
<option value="This Month">This Month</option>
|
||||
<option value="Last Year">Last Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row gy-2 mb-2" id="candidate-list">
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row g-0 justify-content-end mb-4" id="pagination-element">
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div
|
||||
class="pagination-block pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-prev">Previous</a>
|
||||
</div>
|
||||
<span id="page-num" class="pagination"></span>
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-next">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- job-candidate-lists js -->
|
||||
<script src="/assets/js/pages/job-candidate-lists.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,238 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Job Categories')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Job Categories','Jobs')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="row justify-content-between gy-3">
|
||||
<div class="col-lg-3">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for job categories...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-auto">
|
||||
<div class="d-md-flex text-nowrap gap-2">
|
||||
<button class="btn btn-primary add-btn" data-bs-toggle="modal" data-bs-target="#showModal"><i class="ri-add-fill me-1 align-bottom"></i> Add
|
||||
Categories</button>
|
||||
<button class="btn btn-secondary"><i class="ri-filter-2-line me-1 align-bottom"></i>
|
||||
Filters</button>
|
||||
<button type="button" id="dropdownMenuLink1" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-soft-info"><i class="ri-more-2-fill"></i></button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
|
||||
<li><a class="dropdown-item" href="#">All</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Week</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Month</a></li>
|
||||
<li><a class="dropdown-item" href="#">Last Year</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row row-cols-xxl-5 row-cols-lg-3 row-cols-md-2 row-cols-1">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/xulniijg.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Business Development</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">102 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/oclwxpmm.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Automotive Jobs</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">64 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/dklbhvrt.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Construction / Facilities</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">35 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/adwosptt.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Design, Art & Multimedia</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">49 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/kkcllwsu.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Healthcare</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">97 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/rahcoaeu.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Sales & Marketing</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">312 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/smauprql.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Accounting / Finance</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">62 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/itykargr.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Project Management</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">35 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/cnyeuzxc.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Costomer Services</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">35 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/sygggnra.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Content Writer</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">746 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/hfmdczge.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Government Jobs</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">642 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/xhebrhsj.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Digital Marketing</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">364 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/ucvsemjq.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Education & training</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">35 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/pvbjsfif.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">IT & Software</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">35 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-4">
|
||||
<lord-icon src="https://cdn.lordicon.com/auvicynv.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>
|
||||
<a href="#!" class="stretched-link">
|
||||
<h5 class="mt-4">Catering & Tourism</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0">35 Position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mb-3">
|
||||
<button class="btn btn-link text-success mt-2" id="loadmore"><i class="mdi mdi-loading mdi-spin fs-20 align-middle me-2"></i> Load More </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,212 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Companies List')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Companies List','Jobs')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-xxl-5 col-sm-6">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search bg-light border-light" id="searchCompany" placeholder="Search for company, industry type...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<input type="text" class="form-control bg-light border-light" id="datepicker" data-date-format="d M, Y" placeholder="Select date">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<div class="input-light">
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idType">
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Full Time">Full Time</option>
|
||||
<option value="Part Time">Part Time</option>
|
||||
<option value="Intership">Intership</option>
|
||||
<option value="Freelance">Freelance</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<button type="button" class="btn btn-secondary w-100" onclick="filterData();">
|
||||
<i class="ri-equalizer-fill me-1 align-bottom"></i> Filters
|
||||
</button>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row job-list-row" id="companies-list"></div>
|
||||
|
||||
<div class="row g-0 justify-content-end mb-4" id="pagination-element">
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="pagination-block pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-prev">Previous</a>
|
||||
</div>
|
||||
<span id="page-num" class="pagination"></span>
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-next">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div class="col-xxl-3">
|
||||
<div class="card" id="company-overview">
|
||||
<div class="card-body">
|
||||
<div class="avatar-lg mx-auto mb-3">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<img src="/assets/images/companies/img-6.png" alt="" class="avatar-sm company-logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="#!">
|
||||
<h5 class="overview-companyname">Syntyce Solutions</h5>
|
||||
</a>
|
||||
<p class="text-muted overview-industryType">IT Department</p>
|
||||
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-success text-success fs-15 rounded">
|
||||
<i class="ri-global-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-danger text-danger fs-15 rounded">
|
||||
<i class="ri-mail-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);" class="avatar-title bg-soft-warning text-warning fs-15 rounded">
|
||||
<i class="ri-question-answer-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-3">Information</h6>
|
||||
<p class="text-muted mb-4 overview-companydesc">The IT department of a company ensures that the
|
||||
network of computers within the organisation are well-connected and functioning properly.
|
||||
All the other departments within the company rely on them to ensure that their respective
|
||||
functions can go on seamlessly.</p>
|
||||
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless mb-4">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Industry Type</td>
|
||||
<td class="overview-industryType">Chemical Industries</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Location</td>
|
||||
<td class="overview-company_location">Damascus, Syria</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Employee</td>
|
||||
<td class="overview-employee">10-50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Vacancy</td>
|
||||
<td class="overview-vacancy">23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Rating</td>
|
||||
<td><span class="overview-rating">4.8</span> <i class="ri-star-fill text-warning align-bottom"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Website</td>
|
||||
<td>
|
||||
<a href="javascript:void(0);" class="link-primary text-decoration-underline overview-website">www.syntycesolution.com</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Contact Email</td>
|
||||
<td class="overview-email">info@syntycesolution.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Since</td>
|
||||
<td class="overview-since">1995</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="hstack gap-3">
|
||||
<button type="button" class="btn btn-soft-success custom-toggle w-100" data-bs-toggle="button">
|
||||
<span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
|
||||
<span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i>
|
||||
Unfollow</span>
|
||||
</button>
|
||||
<a href="#!" class="btn btn-primary w-100">More View <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card overflow-hidden shadow-none">
|
||||
<div class="card-body bg-soft-danger">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="avatar-sm">
|
||||
<div class="avatar-title bg-soft-danger text-danger rounded-circle fs-17">
|
||||
<i class="ri-gift-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="fs-16">Free trial</h6>
|
||||
<p class="text-muted mb-0">28 days left</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/pages-pricing" class="btn btn-danger">Upgrade</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body bg-soft-danger border-top border-danger border-opacity-25 border-top-dashed">
|
||||
<a href="#!" class="d-flex justify-content-between align-items-center text-body">
|
||||
<span>See benefits</span>
|
||||
<i class="ri-arrow-right-s-line fs-18"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- job-companies-lists js -->
|
||||
<script src="/assets/js/pages/job-companies-lists.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,585 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Job Overview')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card mt-n4 mx-n4">
|
||||
<div class="bg-soft-primary">
|
||||
<div class="card-body px-4 pb-4">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md">
|
||||
<div class="row align-items-center g-3">
|
||||
<div class="col-md-auto">
|
||||
<div class="avatar-md">
|
||||
<div class="avatar-title bg-white rounded-circle">
|
||||
<img src="/assets/images/brands/slack.png" alt="" class="avatar-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<div>
|
||||
<h4 class="fw-bold">Product Designer</h4>
|
||||
<div class="hstack gap-3 flex-wrap">
|
||||
<div><i class="ri-building-line align-bottom me-1"></i> Themesbrand
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div><i class="ri-map-pin-2-line align-bottom me-1"></i> Zuweihir,
|
||||
UAE</div>
|
||||
<div class="vr"></div>
|
||||
<div>Post Date : <span class="fw-medium">15 Sep, 2021</span></div>
|
||||
<div class="vr"></div>
|
||||
<div class="badge rounded-pill bg-success fs-12">Full Time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
<div class="hstack gap-1 flex-wrap mt-4 mt-md-0">
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-warning fs-16">
|
||||
<i class="ri-star-fill"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary fs-16">
|
||||
<i class="ri-share-line"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary fs-16">
|
||||
<i class="ri-flag-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row mt-n5">
|
||||
<div class="col-xxl-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="mb-3">Job Description</h5>
|
||||
|
||||
<p class="text-muted mb-2">A Product Designer of a company is responsible for the user
|
||||
experience of a product, which usually includes taking direction on the business goals and
|
||||
objectives from product management. Product Designers are typically associated with the
|
||||
visual or tactile aspects of a product but sometimes they can also play a role in the
|
||||
information architecture and system design of a product.</p>
|
||||
<p class="text-muted mb-4">Product designer is an exceptional career choice. The demand for
|
||||
product designers is increasing with each passing day but there is a huge shortage for a
|
||||
skilful product designer in the market. With hard work and an apt skill set, a product
|
||||
designer can make a handsome amount of money.</p>
|
||||
<div>
|
||||
<h5 class="mb-3">Responsibilities of Product Designer</h5>
|
||||
<p class="text-muted">Provided below are the responsibilities of a Product Designer:</p>
|
||||
<ul class="text-muted vstack gap-2">
|
||||
<li>
|
||||
To visualise and create drawings and design concepts to determine the best product.
|
||||
</li>
|
||||
<li>
|
||||
To present ideas and concepts to relevant team members for brainstorming.
|
||||
</li>
|
||||
<li>
|
||||
To employ design concepts into functional prototypes.
|
||||
</li>
|
||||
<li>
|
||||
To analyse, modify and revise existing designs or products and meet customer
|
||||
expectations.
|
||||
</li>
|
||||
<li>
|
||||
To coordinate with team members and to ensure accurate efficiency in the design
|
||||
phase.
|
||||
</li>
|
||||
<li>Excellent attention to detail</li>
|
||||
<li>Meticulous and diligent</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="mb-3">Skill & Experience</h5>
|
||||
<ul class="text-muted vstack gap-2">
|
||||
<li>
|
||||
Communication skills
|
||||
<li>
|
||||
Sound visualisation abilities
|
||||
</li>
|
||||
<li>
|
||||
Observation skills
|
||||
</li>
|
||||
<li>
|
||||
Problem-solving abilities
|
||||
</li>
|
||||
<li>
|
||||
Eye for aesthetic design and understanding of customer appeal
|
||||
</li>
|
||||
<li>
|
||||
Artistic & innovative flair
|
||||
</li>
|
||||
<li>
|
||||
Strong knowledge of the industry & market trends
|
||||
</li>
|
||||
<li>
|
||||
Relevant work experience in a particular field is mandatory
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item">
|
||||
<h5 class="mb-0">Share this job:</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#!" class="btn btn-icon btn-soft-info"><i class="ri-facebook-line"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#!" class="btn btn-icon btn-soft-success"><i class="ri-whatsapp-line"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#!" class="btn btn-icon btn-soft-secondary"><i class="ri-twitter-line"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#!" class="btn btn-icon btn-soft-danger"><i class="ri-mail-line"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mb-0">Related Jobs</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#!" class="btn btn-ghost-success">View All <i class="ri-arrow-right-line ms-1 align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-icon btn-soft-primary float-end" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
<div class="avatar-sm mb-4">
|
||||
<div class="avatar-title bg-soft-secondary rounded">
|
||||
<img src="/assets/images/companies/img-1.png" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="#!">
|
||||
<h5>Web designer</h5>
|
||||
</a>
|
||||
<p class="text-muted">Themesbrand</p>
|
||||
|
||||
<div class="d-flex gap-4 mb-3">
|
||||
<div>
|
||||
<i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i>
|
||||
Escondido,California
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i class="ri-time-line text-primary me-1 align-bottom"></i> 3 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">As a Product Designer, you will work within a Product Delivery
|
||||
Team fused with UX, engineering, product and data talent.</p>
|
||||
|
||||
<div class="hstack gap-2">
|
||||
<span class="badge badge-soft-success">Full Time</span>
|
||||
<span class="badge badge-soft-primary">Freelance</span>
|
||||
<span class="badge badge-soft-danger">Urgent</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 hstack gap-2">
|
||||
<a href="#!" class="btn btn-soft-primary w-100">Apply Job</a>
|
||||
<a href="#!" class="btn btn-soft-success w-100">Overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-icon btn-soft-primary float-end" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
<div class="avatar-sm mb-4">
|
||||
<div class="avatar-title bg-soft-info rounded">
|
||||
<img src="/assets/images/companies/img-2.png" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="#!">
|
||||
<h5>Marketing Director</h5>
|
||||
</a>
|
||||
<p class="text-muted">Themesbrand</p>
|
||||
|
||||
<div class="d-flex gap-4 mb-3">
|
||||
<div>
|
||||
<i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i> Stordorf,
|
||||
Germany
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i class="ri-time-line text-primary me-1 align-bottom"></i> 30 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">As a Product Designer, you will work within a Product Delivery
|
||||
Team fused with UX, engineering, product and data talent.</p>
|
||||
|
||||
<div class="hstack gap-2">
|
||||
<span class="badge badge-soft-warning">Part Time</span>
|
||||
<span class="badge badge-soft-primary">Freelance</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 hstack gap-2">
|
||||
<a href="#!" class="btn btn-soft-primary w-100">Apply Job</a>
|
||||
<a href="#!" class="btn btn-soft-success w-100">Overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-icon btn-soft-primary float-end" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
<div class="avatar-sm mb-4">
|
||||
<div class="avatar-title bg-soft-warning rounded">
|
||||
<img src="/assets/images/companies/img-3.png" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="#!">
|
||||
<h5>Product Sales Specialist</h5>
|
||||
</a>
|
||||
<p class="text-muted">Themesbrand</p>
|
||||
|
||||
<div class="d-flex gap-4 mb-3">
|
||||
<div>
|
||||
<i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i> Cullera, Spain
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i class="ri-time-line text-primary me-1 align-bottom"></i> 2 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">As a Product Designer, you will work within a Product Delivery
|
||||
Team fused with UX, engineering, product and data talent.</p>
|
||||
|
||||
<div class="hstack gap-2">
|
||||
<span class="badge badge-soft-success">Full Time</span>
|
||||
<span class="badge badge-soft-info">Private</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 hstack gap-2">
|
||||
<a href="#!" class="btn btn-soft-primary w-100">Apply Job</a>
|
||||
<a href="#!" class="btn btn-soft-success w-100">Overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-icon btn-soft-primary float-end" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
<div class="avatar-sm mb-4">
|
||||
<div class="avatar-title bg-soft-secondary rounded">
|
||||
<img src="/assets/images/companies/img-1.png" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="#!">
|
||||
<h5>Web designer</h5>
|
||||
</a>
|
||||
<p class="text-muted">Themesbrand</p>
|
||||
|
||||
<div class="d-flex gap-4 mb-3">
|
||||
<div>
|
||||
<i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i>
|
||||
Escondido,California
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i class="ri-time-line text-primary me-1 align-bottom"></i> 3 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">As a Product Designer, you will work within a Product Delivery
|
||||
Team fused with UX, engineering, product and data talent.</p>
|
||||
|
||||
<div class="hstack gap-2">
|
||||
<span class="badge badge-soft-success">Full Time</span>
|
||||
<span class="badge badge-soft-primary">Freelance</span>
|
||||
<span class="badge badge-soft-danger">Urgent</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 hstack gap-2">
|
||||
<a href="#!" class="btn btn-soft-primary w-100">Apply Job</a>
|
||||
<a href="#!" class="btn btn-soft-success w-100">Overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-icon btn-soft-primary float-end" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
<div class="avatar-sm mb-4">
|
||||
<div class="avatar-title bg-soft-info rounded">
|
||||
<img src="/assets/images/companies/img-2.png" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="#!">
|
||||
<h5>Marketing Director</h5>
|
||||
</a>
|
||||
<p class="text-muted">Themesbrand</p>
|
||||
|
||||
<div class="d-flex gap-4 mb-3">
|
||||
<div>
|
||||
<i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i> Stordorf,
|
||||
Germany
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i class="ri-time-line text-primary me-1 align-bottom"></i> 30 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">As a Product Designer, you will work within a Product Delivery
|
||||
Team fused with UX, engineering, product and data talent.</p>
|
||||
|
||||
<div class="hstack gap-2">
|
||||
<span class="badge badge-soft-warning">Part Time</span>
|
||||
<span class="badge badge-soft-primary">Freelance</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 hstack gap-2">
|
||||
<a href="#!" class="btn btn-soft-primary w-100">Apply Job</a>
|
||||
<a href="#!" class="btn btn-soft-success w-100">Overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-icon btn-soft-primary float-end" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
<div class="avatar-sm mb-4">
|
||||
<div class="avatar-title bg-soft-warning rounded">
|
||||
<img src="/assets/images/companies/img-3.png" alt="" class="avatar-xxs" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="#!">
|
||||
<h5>Product Sales Specialist</h5>
|
||||
</a>
|
||||
<p class="text-muted">Themesbrand</p>
|
||||
|
||||
<div class="d-flex gap-4 mb-3">
|
||||
<div>
|
||||
<i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i> Cullera, Spain
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i class="ri-time-line text-primary me-1 align-bottom"></i> 2 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">As a Product Designer, you will work within a Product Delivery
|
||||
Team fused with UX, engineering, product and data talent.</p>
|
||||
|
||||
<div class="hstack gap-2">
|
||||
<span class="badge badge-soft-success">Full Time</span>
|
||||
<span class="badge badge-soft-info">Private</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 hstack gap-2">
|
||||
<a href="#!" class="btn btn-soft-primary w-100">Apply Job</a>
|
||||
<a href="#!" class="btn btn-soft-success w-100">Overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Job Overview</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium">Title</td>
|
||||
<td>Product Designer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Company Name</td>
|
||||
<td>Themesbrand</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Location</td>
|
||||
<td>Zuweihir, UAE</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Time</td>
|
||||
<td><span class="badge badge-soft-success">Full Time</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Job Application</td>
|
||||
<td>54 Application</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Post Date</td>
|
||||
<td>15 Sep, 2021</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Salary</td>
|
||||
<td>$35k - $45k</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Experience</td>
|
||||
<td>5+ Years</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Qualification</td>
|
||||
<td>Master Degree</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</div>
|
||||
<div class="mt-4 pt-2 hstack gap-2">
|
||||
<a href="#!" class="btn btn-primary w-100">Apply Now</a>
|
||||
<a href="#!" class="btn btn-soft-danger btn-icon custom-toggle flex-shrink-0" data-bs-toggle="button">
|
||||
<span class="icon-on"><i class="ri-bookmark-line align-bottom"></i></span>
|
||||
<span class="icon-off"><i class="ri-bookmark-3-fill align-bottom"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="avatar-sm mx-auto">
|
||||
<div class="avatar-title bg-soft-warning rounded">
|
||||
<img src="/assets/images/companies/img-3.png" alt="" class="avatar-xxs">
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<a href="#!">
|
||||
<h5 class="mt-3">Themesbrand</h5>
|
||||
</a>
|
||||
<p class="text-muted">IT Department</p>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium">Company Size</td>
|
||||
<td>50+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Industry Type</td>
|
||||
<td>Software</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Founded in</td>
|
||||
<td>2016</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Phone</td>
|
||||
<td>+(234) 12345 67890</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Email</td>
|
||||
<td>themesbrand@gmail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Social media</td>
|
||||
<td>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item">
|
||||
<a href="#!"><i class="ri-whatsapp-line"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#!"><i class="ri-facebook-line"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#!"><i class="ri-twitter-line"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#!"><i class="ri-youtube-line"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Job Location</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="ratio ratio-4x3">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1861227.8137337372!2d51.654904288504646!3d24.33915646928631!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5e48dfb1ab12bd%3A0x33d32f56c0080aa7!2sUnited%20Arab%20Emirates!5e0!3m2!1sen!2sin!4v1664257145153!5m2!1sen!2sin" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Contact Us</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="nameInput" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="nameInput" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="emailInput" class="form-label">Email</label>
|
||||
<input type="text" class="form-control" id="emailInput" placeholder="Enter your email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="messageInput" class="form-label">Message</label>
|
||||
<textarea class="form-control" id="messageInput" rows="3" placeholder="Message"></textarea>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,137 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Job Grid Lists')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Job Grid Lists','Jobs')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-xxl-4 col-sm-12">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search bg-light border-light"
|
||||
id="searchJob" autocomplete="off"
|
||||
placeholder="Search for jobs or companies...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-4">
|
||||
<input type="text" class="form-control bg-light border-light" id="datepicker"
|
||||
data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true"
|
||||
placeholder="Select date">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<div class="input-light">
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
name="choices-idType" id="idType">
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Full Time">Full Time</option>
|
||||
<option value="Part Time">Part Time</option>
|
||||
<option value="Intership">Intership</option>
|
||||
<option value="Freelance">Freelance</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<div class="input-light">
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
name="choices-single-default" id="idStatus">
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Active">Active</option>
|
||||
<option value="New">New</option>
|
||||
<option value="Close">Close</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-1 col-sm-4">
|
||||
<button type="button" class="btn btn-primary w-100" onclick="filterData();">
|
||||
<i class="ri-equalizer-fill me-1 align-bottom"></i> Filters
|
||||
</button>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted fs-14 mb-0">Result: <span id="total-result"></span></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown">
|
||||
<a class="text-muted fs-14 dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
All View
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row" id="job-list">
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row g-0 justify-content-end mb-4" id="pagination-element">
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div
|
||||
class="pagination-block pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-prev">Previous</a>
|
||||
</div>
|
||||
<span id="page-num" class="pagination"></span>
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-next">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- job-grid-list js -->
|
||||
<script src="assets/js/pages/job-grid-list.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,277 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Job Lists')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Job Lists','Jobs')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<h6 class="card-title mb-0 flex-grow-1">Search Jobs</h6>
|
||||
<div class="flex-shrink-0">
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#CreateJobModal"><i class="ri-add-line align-bottom me-1"></i>
|
||||
Create New Job</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3 gy-3">
|
||||
<div class="col-xxl-10 col-md-6">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search bg-light border-light" id="searchJob" autocomplete="off" placeholder="Search for jobs or companies...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-2 col-md-6">
|
||||
<div class="input-light">
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
|
||||
<option value="All">All Selected</option>
|
||||
<option value="Newest" selected>Newest</option>
|
||||
<option value="Popluar">Popluar</option>
|
||||
<option value="Oldest">Oldest</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-12 d-none" id="found-job-alert">
|
||||
<div class="alert alert-success mb-0 text-center" role="alert">
|
||||
<strong id="total-result">253</strong> jobs found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-9">
|
||||
<div id="job-list"></div>
|
||||
|
||||
<div class="row g-0 justify-content-end mb-4" id="pagination-element">
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="pagination-block pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-prev">Previous</a>
|
||||
</div>
|
||||
<span id="page-num" class="pagination"></span>
|
||||
<div class="page-item">
|
||||
<a href="javascript:void(0);" class="page-link" id="page-next">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3">
|
||||
<div class="card job-list-view-card overflow-hidden" id="job-overview">
|
||||
<img src="assets/images/small/img-10.jpg" alt="" id="cover-img" class="img-fluid background object-cover">
|
||||
<div class="card-body">
|
||||
<div class="avatar-md mt-n5">
|
||||
<div class="avatar-title bg-light rounded-circle">
|
||||
<img src="assets/images/companies/img-7.png" alt="" class="avatar-xs view-companylogo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h5 class="view-title">Product Designer</h5>
|
||||
<div class="hstack gap-3 mb-3">
|
||||
<span class="text-muted"><i class="ri-building-line me-1 align-bottom"></i> <span class="view-companyname">Themesbrand</span></span>
|
||||
<span class="text-muted"><i class="ri-map-pin-2-line me-1 align-bottom"></i> <span class="view-location">United Kingdom</span></span>
|
||||
</div>
|
||||
<p class="text-muted view-desc">A UI/UX designer's job is to create user-friendly interfaces
|
||||
that enable users to understand how to use complex technical products. If you're
|
||||
passionate about the latest technology trends and devices, you'll find great fulfillment
|
||||
in being involved in the design process for the next hot gadget.</p>
|
||||
<div class="py-3 border border-dashed border-start-0 border-end-0 mt-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div>
|
||||
<p class="mb-2 text-uppercase fw-medium fs-12 text-muted">Job Type</p>
|
||||
<h5 class="fs-14 mb-0 view-type">Full Time</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div>
|
||||
<p class="mb-2 text-uppercase fw-medium fs-12 text-muted">Post Date</p>
|
||||
<h5 class="fs-14 mb-0 view-postdate">15 Sep, 2022</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div>
|
||||
<p class="mb-2 text-uppercase fw-medium fs-12 text-muted">Experience</p>
|
||||
<h5 class="fs-14 mb-0 view-experience">0 - 5 Year</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h5 class="mb-3">Application Summary</h5>
|
||||
|
||||
<div>
|
||||
<div id="simple_dount_chart" data-colors='["--vz-secondary", "--vz-primary", "--vz-success"]' class="apex-charts" dir="ltr"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="button" class="btn btn-soft-info w-100">Apply Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
<div class="modal fade" id="CreateJobModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content border-0">
|
||||
<form id="createjob-form" autocomplete="off" class="needs-validation" novalidate>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="id-field" />
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<div class="px-1 pt-1">
|
||||
<div class="modal-team-cover position-relative mb-0 mt-n4 mx-n4 rounded-top overflow-hidden">
|
||||
<img src="assets/images/small/img-9.jpg" alt="" id="modal-cover-img" class="img-fluid">
|
||||
|
||||
<div class="d-flex position-absolute start-0 end-0 top-0 p-3">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="modal-title text-white" id="exampleModalLabel">Create New
|
||||
Job</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<div>
|
||||
<label for="cover-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="top" title="Select Cover Image">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
|
||||
<i class="ri-image-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input class="form-control d-none" value="" id="cover-image-input" type="file" accept="image/png, image/gif, image/jpeg">
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white" id="close-jobListModal" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mb-4 mt-n5 pt-2">
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="position-absolute bottom-0 end-0">
|
||||
<label for="companylogo-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
|
||||
<div class="avatar-xs cursor-pointer">
|
||||
<div class="avatar-title bg-light border rounded-circle text-muted">
|
||||
<i class="ri-image-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input class="form-control d-none" value="" id="companylogo-image-input" type="file" accept="image/png, image/gif, image/jpeg">
|
||||
</div>
|
||||
<div class="avatar-lg p-1">
|
||||
<div class="avatar-title bg-light rounded-circle">
|
||||
<img src="assets/images/users/multi-user.jpg" id="companylogo-img" class="avatar-md rounded-circle object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fs-13 mt-3">Company Logo</h5>
|
||||
</div>
|
||||
<div>
|
||||
<label for="jobtitle-field" class="form-label">Job Title</label>
|
||||
<input type="text" id="jobtitle-field" class="form-control" placeholder="Enter job title" required />
|
||||
<div class="invalid-feedback">Please enter a job title.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="companyname-field" class="form-label">Company Name</label>
|
||||
<input type="text" id="companyname-field" class="form-control" placeholder="Enter company name" required />
|
||||
<div class="invalid-feedback">Please enter a company name.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="job_type-field" class="form-label">Job Type</label>
|
||||
<select class="form-select" id="job_type-field" required>
|
||||
<option value="Full Time">Full Time</option>
|
||||
<option value="Part Time">Part Time</option>
|
||||
<option value="Freelance">Freelance</option>
|
||||
<option value="Intership">Intership</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">Please select a job type.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="experience-field" class="form-label">Experience</label>
|
||||
<input type="text" id="experience-field" class="form-control" placeholder="Enter experience" required />
|
||||
<div class="invalid-feedback">Please enter a job experience.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="location-field" class="form-label">Location</label>
|
||||
<input type="text" id="location-field" class="form-control" placeholder="Enter location" required />
|
||||
<div class="invalid-feedback">Please enter a location.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="Salary-field" class="form-label">Salary</label>
|
||||
<input type="number" id="Salary-field" class="form-control" placeholder="Enter salary" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="website-field" class="form-label">Tags</label>
|
||||
<input class="form-control" id="taginput-choices" data-choices data-choices-text-unique-true type="text" value="Design, Remote" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="description-field" class="form-label">Description</label>
|
||||
<textarea class="form-control" id="description-field" rows="3" placeholder="Enter description" required></textarea>
|
||||
<div class="invalid-feedback">Please enter a description.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-success" id="add-btn">Add Job</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end add modal-->
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/job-list.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,193 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('New Job')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('New Job','Jobs')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<form action="#">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Create Job</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="job-title-Input" class="form-label">Job Title <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="job-title-Input"
|
||||
placeholder="Enter job title" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="job-position-Input" class="form-label">Job Position <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="job-position-Input"
|
||||
placeholder="Enter job position" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="job-category-Input" class="form-label">Job Category <span
|
||||
class="text-danger">*</span></label>
|
||||
<select class="form-control" data-choices name="job-category-Input" required>
|
||||
<option value="">Select Category</option>
|
||||
<option value="Accounting & Finance">Accounting & Finance</option>
|
||||
<option value="Purchasing Manager">Purchasing Manager</option>
|
||||
<option value="Education & training">Education & training</option>
|
||||
<option value="Marketing & Advertising">Marketing & Advertising</option>
|
||||
<option value="It / Software Jobs">It / Software Jobs</option>
|
||||
<option value="Digital Marketing">Digital Marketing</option>
|
||||
<option value="Administrative Officer">Administrative Officer</option>
|
||||
<option value="Government Jobs">Government Jobs</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="job-type-Input" class="form-label">Job Type <span
|
||||
class="text-danger">*</span></label>
|
||||
<select class="form-control" data-choices name="job-type-Input" required>
|
||||
<option value="">Select job type</option>
|
||||
<option value="Full Time">Full Time</option>
|
||||
<option value="Part Time">Part Time</option>
|
||||
<option value="Freelance">Freelance</option>
|
||||
<option value="Intership">Intership</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="description-field" class="form-label">Description <span
|
||||
class="text-danger">*</span></label>
|
||||
<textarea class="form-control" id="description-field" rows="3"
|
||||
placeholder="Enter description" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="vancancy-Input" class="form-label">No. of Vancancy <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="number" class="form-control" id="vancancy-Input"
|
||||
placeholder="No. of vancancy" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="experience-Input" class="form-label">Experience <span
|
||||
class="text-danger">*</span></label>
|
||||
<select class="form-control" data-choices name="experience-Input">
|
||||
<option value="">Select Experience</option>
|
||||
<option value="0 Year">0 Year</option>
|
||||
<option value="2 Yeasr">2 Years</option>
|
||||
<option value="3 Years">3 Years</option>
|
||||
<option value="4 Years">4 Years</option>
|
||||
<option value="5 Years">5 Years</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="last-apply-date-Input" class="form-label">Last Date of Apply <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="last-apply-date-Input"
|
||||
data-provider="flatpickr" data-date-format="d M, Y"
|
||||
placeholder="Select date" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="close-date-Input" class="form-label">Close Date <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="close-date-Input"
|
||||
data-provider="flatpickr" data-date-format="d M, Y"
|
||||
placeholder="Select date" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="start-salary-Input" class="form-label">Start Salary</label>
|
||||
<input type="number" class="form-control" id="start-salary-Input"
|
||||
placeholder="Enter start salary" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="last-salary-Input" class="form-label">Last Salary</label>
|
||||
<input type="number" class="form-control" id="last-salary-Input"
|
||||
placeholder="Enter end salary" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="country-Input" class="form-label">Country <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="country-Input"
|
||||
placeholder="Enter country" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<label for="city-Input" class="form-label">State <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="city-Input" placeholder="Enter city"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="website-field" class="form-label">Tags</label>
|
||||
<input class="form-control" id="choices-text-unique-values" data-choices
|
||||
data-choices-text-unique-true type="text" value="Design, Remote" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="hstack justify-content-end gap-2">
|
||||
<button type="button" class="btn btn-ghost-danger"><i
|
||||
class="ri-close-line align-bottom"></i> Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Add Job</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,255 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Statistics')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Statistics','Jobs')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1 p-3">
|
||||
<h5 class="mb-3">Application</h5>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 16.24 % </span> vs. previous month
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="apex-charts" data-colors='["--vz-success" , "--vz-transparent"]' dir="ltr" id="results_sparkline_charts3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1 p-3">
|
||||
<h5 class="mb-3">Interviewed</h5>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 34.24 % </span> vs. previous month
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="apex-charts" data-colors='["--vz-success" , "--vz-transparent"]' dir="ltr" id="results_sparkline_charts4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1 p-3">
|
||||
<h5 class="mb-3">Hired</h5>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 6.67 % </span> vs. previous month</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="apex-charts" data-colors='["--vz-success" , "--vz-transparent"]' dir="ltr" id="results_sparkline_charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1 p-3">
|
||||
<h5 class="mb-3">Rejected</h5>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-danger mb-0"> <i class="ri-arrow-down-line align-middle"></i> 3.24 % </span> vs. previous month
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="apex-charts" data-colors='["--vz-danger", "--vz-transparent"]' dir="ltr" id="results_sparkline_charts2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex">
|
||||
<h5 class="card-title mb-0 flex-grow-1 ">Visitor Graph</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown card-header-dropdown">
|
||||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="fw-semibold text-uppercase fs-12">Sort by: </span><span class="text-muted">Current Week<i class="mdi mdi-chevron-down ms-1"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Today</a>
|
||||
<a class="dropdown-item" href="#">Last Week</a>
|
||||
<a class="dropdown-item" href="#">Last Month</a>
|
||||
<a class="dropdown-item" href="#">Current Year</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="distributed_treemap" data-colors='["--vz-primary", "--vz-primary-rgb, 0.65", "--vz-secondary", "--vz-secondary-rgb, 0.75","--vz-primary-rgb, 0.4", "--vz-success"]' class="apex-charts" dir="ltr"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-4">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Users by Device</h4>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown card-header-dropdown">
|
||||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="text-muted fs-16"><i class="mdi mdi-dots-vertical align-middle"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Today</a>
|
||||
<a class="dropdown-item" href="#">Last Week</a>
|
||||
<a class="dropdown-item" href="#">Last Month</a>
|
||||
<a class="dropdown-item" href="#">Current Year</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body">
|
||||
<div id="user_device_pie_charts" data-colors='["--vz-primary", "--vz-secondary", "--vz-success"]' class="apex-charts" dir="ltr"></div>
|
||||
|
||||
<div class="table-responsive mt-3">
|
||||
<table class="table table-borderless table-sm table-centered align-middle table-nowrap mb-0">
|
||||
<tbody class="border-0">
|
||||
<tr>
|
||||
<td>
|
||||
<h4 class="text-truncate fs-14 fs-medium mb-0"><i class="ri-stop-fill align-middle fs-18 text-primary me-2"></i>Desktop
|
||||
Users</h4>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-muted mb-0"><i data-feather="users" class="me-2 icon-sm"></i>78.56k</p>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<p class="text-success fw-medium fs-12 mb-0"><i class="ri-arrow-up-s-fill fs-5 align-middle"></i>2.08% </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h4 class="text-truncate fs-14 fs-medium mb-0"><i class="ri-stop-fill align-middle fs-18 text-warning me-2"></i>Mobile
|
||||
Users</h4>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-muted mb-0"><i data-feather="users" class="me-2 icon-sm"></i>105.02k</p>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<p class="text-danger fw-medium fs-12 mb-0"><i class="ri-arrow-down-s-fill fs-5 align-middle"></i>10.52%
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h4 class="text-truncate fs-14 fs-medium mb-0"><i class="ri-stop-fill align-middle fs-18 text-info me-2"></i>Tablet
|
||||
Users</h4>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-muted mb-0"><i data-feather="users" class="me-2 icon-sm"></i>42.89k</p>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<p class="text-danger fw-medium fs-12 mb-0"><i class="ri-arrow-down-s-fill fs-5 align-middle"></i>7.36%
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-4 col-md-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Your Network Summary</h4>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown card-header-dropdown">
|
||||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="fw-semibold text-uppercase fs-12">Sort by: </span><span class="text-muted">Monthly<i class="mdi mdi-chevron-down ms-1"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Today</a>
|
||||
<a class="dropdown-item" href="#">Weekly</a>
|
||||
<a class="dropdown-item" href="#">Monthly</a>
|
||||
<a class="dropdown-item" href="#">Yearly</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body pb-0">
|
||||
<div id="deal-type-charts" data-colors='["--vz-primary", "--vz-secondary"]' class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card body -->
|
||||
</div><!-- end card -->
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-xxl-8 col-md-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header align-items-center d-flex">
|
||||
<h4 class="card-title mb-0 flex-grow-1">Jobs Summary</h4>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown card-header-dropdown">
|
||||
<a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="fw-semibold text-uppercase fs-12">Sort by: </span><span class="text-muted">Current Year<i class="mdi mdi-chevron-down ms-1"></i></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Today</a>
|
||||
<a class="dropdown-item" href="#">Last Week</a>
|
||||
<a class="dropdown-item" href="#">Last Month</a>
|
||||
<a class="dropdown-item" href="#">Current Year</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
<div class="card-body px-0">
|
||||
<!-- <ul class="list-inline main-chart text-center mb-0">
|
||||
<li class="list-inline-item chart-border-left me-0 border-0">
|
||||
<h4 class="text-primary">$584k <span class="text-muted d-inline-block fs-13 align-middle ms-2">Revenue</span></h4>
|
||||
</li>
|
||||
<li class="list-inline-item chart-border-left me-0">
|
||||
<h4>$497k<span class="text-muted d-inline-block fs-13 align-middle ms-2">Expenses</span>
|
||||
</h4>
|
||||
</li>
|
||||
<li class="list-inline-item chart-border-left me-0">
|
||||
<h4><span data-plugin="counterup">3.6</span>%<span class="text-muted d-inline-block fs-13 align-middle ms-2">Profit Ratio</span></h4>
|
||||
</li>
|
||||
</ul> -->
|
||||
<div id="revenue-expenses-charts" data-colors='["--vz-success","--vz-primary", "--vz-info", "--vz-danger"]' class="apex-charts" dir="ltr"></div>
|
||||
</div>
|
||||
</div><!-- end card -->
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- apexcharts -->
|
||||
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- job-statistics js -->
|
||||
<script src="assets/js/pages/job-statistics.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,693 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Calendar')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
|
||||
<div class="email-wrapper d-lg-flex gap-1 mt-n4 py-1">
|
||||
<div class="email-menu-sidebar">
|
||||
<div class="p-4 d-flex flex-column h-100">
|
||||
<div class="pb-4 border-bottom border-bottom-dashed">
|
||||
<button type="button" class="btn btn-secondary w-100" data-bs-toggle="modal" data-bs-target="#composemodal"><i data-feather="plus-circle" class="icon-xs me-1 icon-dual-light"></i> Compose</button>
|
||||
</div>
|
||||
|
||||
<div class="mx-n4 px-4 email-menu-sidebar-scroll" data-simplebar>
|
||||
<div class="mail-list mt-3">
|
||||
<a href="#" class="active"><i class="ri-mail-fill me-3 align-middle fw-medium"></i> <span class="mail-list-link">All</span> <span class="badge badge-soft-success ms-auto ">5</span></a>
|
||||
<a href="#"><i class="ri-inbox-archive-fill me-3 align-middle fw-medium"></i> <span class="mail-list-link">Inbox</span> <span class="badge badge-soft-success ms-auto ">5</span></a>
|
||||
<a href="#"><i class="ri-send-plane-2-fill me-3 align-middle fw-medium"></i><span class="mail-list-link">Sent</span></a>
|
||||
<a href="#"><i class="ri-edit-2-fill me-3 align-middle fw-medium"></i><span class="mail-list-link">Draft</span></a>
|
||||
<a href="#"><i class="ri-error-warning-fill me-3 align-middle fw-medium"></i><span class="mail-list-link">Spam</span></a>
|
||||
<a href="#"><i class="ri-delete-bin-5-fill me-3 align-middle fw-medium"></i><span class="mail-list-link">Trash</span></a>
|
||||
<a href="#"><i class="ri-star-fill me-3 align-middle fw-medium"></i><span class="mail-list-link">Starred</span></a>
|
||||
<a href="#"><i class="ri-price-tag-3-fill me-3 align-middle fw-medium"></i><span class="mail-list-link">Important</span></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<h5 class="fs-12 text-uppercase text-muted mt-4">Labels</h5>
|
||||
|
||||
<div class="mail-list mt-1">
|
||||
<a href="#"><span class="ri-checkbox-blank-circle-line me-2 text-info"></span><span class="mail-list-link" data-type="label">Support</span> <span class="badge badge-soft-success ms-auto">3</span></a>
|
||||
<a href="#"><span class="ri-checkbox-blank-circle-line me-2 text-warning"></span><span class="mail-list-link" data-type="label">Freelance</span></a>
|
||||
<a href="#"><span class="ri-checkbox-blank-circle-line me-2 text-primary"></span><span class="mail-list-link" data-type="label">Social</span></a>
|
||||
<a href="#"><span class="ri-checkbox-blank-circle-line me-2 text-danger"></span><span class="mail-list-link" data-type="label">Friends</span><span class="badge badge-soft-success ms-auto">2</span></a>
|
||||
<a href="#"><span class="ri-checkbox-blank-circle-line me-2 text-success"></span><span class="mail-list-link" data-type="label">Family</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-top border-top-dashed pt-3 mt-3">
|
||||
<a href="#" class="btn btn-icon btn-sm btn-soft-info btn-rounded float-end"><i class="bx bx-plus fs-16"></i></a>
|
||||
<h5 class="fs-12 text-uppercase text-muted mb-3">Chat</h5>
|
||||
|
||||
<div class="mt-2 vstack email-chat-list mx-n4">
|
||||
<a href="javascript: void(0);" class="d-flex align-items-center active">
|
||||
<div class="flex-shrink-0 me-2 avatar-xxs chatlist-user-image">
|
||||
<img class="img-fluid rounded-circle" src="assets/images/users/avatar-2.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 chat-user-box overflow-hidden">
|
||||
<h5 class="fs-13 text-truncate mb-0 chatlist-user-name">Scott Median</h5>
|
||||
<small class="text-muted text-truncate mb-0">Hello ! are you there?</small>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript: void(0);" class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-2 avatar-xxs chatlist-user-image">
|
||||
<img class="img-fluid rounded-circle" src="assets/images/users/avatar-4.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 chat-user-box overflow-hidden">
|
||||
<h5 class="fs-13 text-truncate mb-0 chatlist-user-name">Julian Rosa</h5>
|
||||
<small class="text-muted text-truncate mb-0">What about our next..</small>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript: void(0);" class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-2 avatar-xxs chatlist-user-image">
|
||||
<img class="img-fluid rounded-circle" src="assets/images/users/avatar-3.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 chat-user-box overflow-hidden">
|
||||
<h5 class="fs-13 text-truncate mb-0 chatlist-user-name">David Medina</h5>
|
||||
<small class="text-muted text-truncate mb-0">Yeah everything is fine</small>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript: void(0);" class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-2 avatar-xxs chatlist-user-image">
|
||||
<img class="img-fluid rounded-circle" src="assets/images/users/avatar-5.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 chat-user-box overflow-hidden">
|
||||
<h5 class="fs-13 text-truncate mb-0 chatlist-user-name">Jay Baker</h5>
|
||||
<small class="text-muted text-truncate mb-0">Wow that's great</small>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
<h5 class="fs-13">1.75 GB of 10 GB used</h5>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end email-menu-sidebar -->
|
||||
|
||||
<div class="email-content">
|
||||
<div class="p-4 pb-0">
|
||||
<div class="border-bottom border-bottom-dashed">
|
||||
<div class="row mt-n2 mb-3 mb-sm-0">
|
||||
<div class="col col-sm-auto order-1 d-block d-lg-none">
|
||||
<button type="button" class="btn btn-soft-success btn-icon btn-sm fs-16 email-menu-btn">
|
||||
<i class="ri-menu-2-fill align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm order-3 order-sm-2">
|
||||
<div class="hstack gap-sm-1 align-items-center flex-wrap email-topbar-link">
|
||||
<div class="form-check fs-14 m-0">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkall">
|
||||
<label class="form-check-label" for="checkall"></label>
|
||||
</div>
|
||||
<div id="email-topbar-actions">
|
||||
<div class="hstack gap-sm-1 align-items-center flex-wrap">
|
||||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm fs-16" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Archive">
|
||||
<i class="ri-inbox-archive-fill align-bottom"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm fs-16" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Report Spam">
|
||||
<i class="ri-error-warning-fill align-bottom"></i>
|
||||
</button>
|
||||
<div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Trash">
|
||||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm fs-16" data-bs-toggle="modal" data-bs-target="#removeItemModal">
|
||||
<i class="ri-delete-bin-5-fill align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vr align-self-center mx-2"></div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-secondary btn-icon btn-sm fs-16" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ri-price-tag-3-fill align-bottom"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Support</a>
|
||||
<a class="dropdown-item" href="#">Freelance</a>
|
||||
<a class="dropdown-item" href="#">Social</a>
|
||||
<a class="dropdown-item" href="#">Friends</a>
|
||||
<a class="dropdown-item" href="#">Family</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-secondary btn-icon btn-sm fs-16" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ri-more-2-fill align-bottom"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#" id="mark-all-read">Mark all as Read</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible unreadConversations-alert px-4 fade show " id="unreadConversations" role="alert">
|
||||
No Unread Conversations
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto order-2 order-sm-3">
|
||||
<div class="d-flex gap-sm-1 email-topbar-link">
|
||||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm fs-16">
|
||||
<i class="ri-refresh-line align-bottom"></i>
|
||||
</button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-secondary btn-icon btn-sm fs-16" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ri-more-2-fill align-bottom"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Mark as Unread</a>
|
||||
<a class="dropdown-item" href="#">Mark as Important</a>
|
||||
<a class="dropdown-item" href="#">Add to Tasks</a>
|
||||
<a class="dropdown-item" href="#">Add Star</a>
|
||||
<a class="dropdown-item" href="#">Mute</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-end mt-3">
|
||||
<div class="col">
|
||||
<div id="mail-filter-navlist">
|
||||
<ul class="nav nav-tabs nav-tabs-custom nav-success gap-1 text-center border-bottom-0" role="tablist">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link fw-semibold active" id="pills-primary-tab" data-bs-toggle="pill" data-bs-target="#pills-primary" type="button" role="tab" aria-controls="pills-primary" aria-selected="true">
|
||||
<i class="ri-inbox-fill align-bottom d-inline-block"></i>
|
||||
<span class="ms-1 d-none d-sm-inline-block">Primary</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link fw-semibold" id="pills-social-tab" data-bs-toggle="pill" data-bs-target="#pills-social" type="button" role="tab" aria-controls="pills-social" aria-selected="false">
|
||||
<i class="ri-group-fill align-bottom d-inline-block"></i>
|
||||
<span class="ms-1 d-none d-sm-inline-block">Social</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link fw-semibold" id="pills-promotions-tab" data-bs-toggle="pill" data-bs-target="#pills-promotions" type="button" role="tab" aria-controls="pills-promotions" aria-selected="false">
|
||||
<i class="ri-price-tag-3-fill align-bottom d-inline-block"></i>
|
||||
<span class="ms-1 d-none d-sm-inline-block">Promotions</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="text-muted mb-2">1-50 of 154</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="pills-primary" role="tabpanel" aria-labelledby="pills-primary-tab">
|
||||
<div class="message-list-content mx-n4 px-4 message-list-scroll" data-simplebar>
|
||||
<div id="elmLoader">
|
||||
<div class="spinner-border text-primary avatar-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="message-list" id="mail-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="pills-social" role="tabpanel" aria-labelledby="pills-social-tab">
|
||||
<div class="message-list-content mx-n4 px-4 message-list-scroll" data-simplebar>
|
||||
<ul class="message-list" id="social-mail-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="pills-promotions" role="tabpanel" aria-labelledby="pills-promotions-tab">
|
||||
<div class="message-list-content mx-n4 px-4 message-list-scroll" data-simplebar>
|
||||
<ul class="message-list" id="promotions-mail-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end email-content -->
|
||||
|
||||
<div class="email-detail-content">
|
||||
<div class="p-4 d-flex flex-column h-100">
|
||||
<div class="pb-4 border-bottom border-bottom-dashed">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<button type="button" class="btn btn-soft-danger btn-icon btn-sm fs-16 close-btn-email" id="close-btn-email">
|
||||
<i class="ri-close-fill align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="hstack gap-sm-1 align-items-center flex-wrap email-topbar-link">
|
||||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm fs-16 favourite-btn active">
|
||||
<i class="ri-star-fill align-bottom"></i>
|
||||
</button>
|
||||
<button class="btn btn-ghost-secondary btn-icon btn-sm fs-16">
|
||||
<i class="ri-printer-fill align-bottom"></i>
|
||||
</button>
|
||||
<button class="btn btn-ghost-secondary btn-icon btn-sm fs-16 remove-mail" data-remove-id="" data-bs-toggle="modal" data-bs-target="#removeItemModal">
|
||||
<i class="ri-delete-bin-5-fill align-bottom"></i>
|
||||
</button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost-secondary btn-icon btn-sm fs-16" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ri-more-2-fill align-bottom"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Mark as Unread</a>
|
||||
<a class="dropdown-item" href="#">Mark as Important</a>
|
||||
<a class="dropdown-item" href="#">Add to Tasks</a>
|
||||
<a class="dropdown-item" href="#">Add Star</a>
|
||||
<a class="dropdown-item" href="#">Mute</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-n4 px-4 email-detail-content-scroll" data-simplebar>
|
||||
<div class="mt-4 mb-3">
|
||||
<h5 class="fw-bold email-subject-title">New updates for Skote Theme</h5>
|
||||
</div>
|
||||
|
||||
<div class="accordion accordion-flush">
|
||||
<div class="accordion-item border-dashed left">
|
||||
<div class="accordion-header">
|
||||
<a role="button" class="btn w-100 text-start px-0 bg-transparent shadow-none collapsed" data-bs-toggle="collapse" href="#email-collapseOne" aria-expanded="true" aria-controls="email-collapseOne">
|
||||
<div class="d-flex align-items-center text-muted">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<img src="assets/images/users/avatar-3.jpg" alt="" class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-14 text-truncate email-user-name mb-0">Jack Davis</h5>
|
||||
<div class="text-truncate fs-12">to: me</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 align-self-start">
|
||||
<div class="text-muted fs-12">09 Jan 2022, 11:12 AM</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="email-collapseOne" class="accordion-collapse collapse">
|
||||
<div class="accordion-body text-body px-0">
|
||||
<div>
|
||||
<p>Hi,</p>
|
||||
<p>Praesent dui ex, dapibus eget mauris ut, finibus vestibulum enim. Quisque
|
||||
arcu leo, facilisis in fringilla id, luctus in tortor.</p>
|
||||
<p>Sed elementum turpis eu lorem interdum, sed porttitor eros commodo. Nam
|
||||
eu venenatis tortor, id lacinia diam. Sed aliquam in dui et porta. Sed
|
||||
bibendum orci non tincidunt ultrices.</p>
|
||||
<p>Sincerly,</p>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
<div class="border rounded avatar-xl h-auto">
|
||||
<img src="assets/images/small/img-2.jpg" alt="" class="img-fluid rouned-top">
|
||||
<div class="py-2 text-center">
|
||||
<a href="" class="d-block fw-semibold">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border rounded avatar-xl h-auto">
|
||||
<img src="assets/images/small/img-6.jpg" alt="" class="img-fluid rouned-top">
|
||||
<div class="py-2 text-center">
|
||||
<a href="" class="d-block fw-semibold">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end accordion-item -->
|
||||
|
||||
<div class="accordion-item border-dashed right">
|
||||
<div class="accordion-header">
|
||||
<a role="button" class="btn w-100 text-start px-0 bg-transparent shadow-none collapsed" data-bs-toggle="collapse" href="#email-collapseTwo" aria-expanded="true" aria-controls="email-collapseTwo">
|
||||
<div class="d-flex align-items-center text-muted">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<img src="assets/images/users/avatar-1.jpg" alt="" class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-14 text-truncate email-user-name-right mb-0">Anna Adame
|
||||
</h5>
|
||||
<div class="text-truncate fs-12">to: jackdavis@email.com</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 align-self-start">
|
||||
<div class="text-muted fs-12">09 Jan 2022, 02:15 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="email-collapseTwo" class="accordion-collapse collapse">
|
||||
<div class="accordion-body text-body px-0">
|
||||
<div>
|
||||
<p>Hi,</p>
|
||||
<p>If several languages coalesce, the grammar of the resulting language is
|
||||
more simple and regular than that of the individual.</p>
|
||||
<p>Thank you</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end accordion-item -->
|
||||
|
||||
<div class="accordion-item border-dashed left">
|
||||
<div class="accordion-header">
|
||||
<a role="button" class="btn w-100 text-start px-0 bg-transparent shadow-none" data-bs-toggle="collapse" href="#email-collapseThree" aria-expanded="true" aria-controls="email-collapseThree">
|
||||
<div class="d-flex align-items-center text-muted">
|
||||
<div class="flex-shrink-0 avatar-xs me-3">
|
||||
<img src="assets/images/users/avatar-3.jpg" alt="" class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-14 text-truncate email-user-name mb-0">Jack Davis</h5>
|
||||
<div class="text-truncate fs-12">to: me</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 align-self-start">
|
||||
<div class="text-muted fs-12">10 Jan 2022, 10:08 AM</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="email-collapseThree" class="accordion-collapse collapse show">
|
||||
<div class="accordion-body text-body px-0">
|
||||
<div>
|
||||
<p>Hi,</p>
|
||||
<p>Everyone realizes why a new common language would be desirable: one could
|
||||
refuse to pay expensive translators. To achieve this, it would be
|
||||
necessary to have uniform grammar pronunciation.</p>
|
||||
<p>Thank you</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end accordion-item -->
|
||||
</div>
|
||||
<!-- end accordion -->
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<form class="mt-2">
|
||||
<div>
|
||||
<label for="exampleFormControlTextarea1" class="form-label">Reply :</label>
|
||||
<textarea class="form-control border-bottom-0 rounded-top rounded-0 border" id="exampleFormControlTextarea1" rows="3" placeholder="Enter message"></textarea>
|
||||
<div class="bg-light px-2 py-1 rouned-bottom border">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-sm py-0 fs-15 btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Bold"><i class="ri-bold align-bottom"></i></button>
|
||||
<button type="button" class="btn btn-sm py-0 fs-15 btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Italic"><i class="ri-italic align-bottom"></i></button>
|
||||
<button type="button" class="btn btn-sm py-0 fs-15 btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Link"><i class="ri-link align-bottom"></i></button>
|
||||
<button type="button" class="btn btn-sm py-0 fs-15 btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Image"><i class="ri-image-2-line align-bottom"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-success"><i class="ri-send-plane-2-fill align-bottom"></i></button>
|
||||
<button type="button" class="btn btn-sm btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="#"><i class="ri-timer-line text-muted me-1 align-bottom"></i>
|
||||
Schedule Send</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end email-detail-content -->
|
||||
</div>
|
||||
<!-- end email wrapper -->
|
||||
|
||||
<div class="email-chat-detail" id="emailchat-detailElem">
|
||||
<div class="card mb-0">
|
||||
<div class="card-header align-items-center d-flex bg-primary text-white-50">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 text-white mb-1 profile-username"></h5>
|
||||
<p class="mb-0 fs-12 lh-1">Active</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="mt-n3 me-n3">
|
||||
<button type="button" class="btn btn-link text-white fs-16 text-decoration-none" id="emailchat-btn-close"><i class="ri-close-fill"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body p-0">
|
||||
<div id="users-chat">
|
||||
<div class="chat-conversation p-3" id="chat-conversation" data-simplebar style="height: 250px;">
|
||||
<ul class="list-unstyled chat-conversation-list chat-sm" id="users-conversation">
|
||||
<li class="chat-list left">
|
||||
<div class="conversation-list">
|
||||
<div class="chat-avatar">
|
||||
<img src="assets/images/users/avatar-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="user-chat-content">
|
||||
<div class="ctext-wrap">
|
||||
<div class="ctext-wrap-content">
|
||||
<p class="mb-0 ctext-content">Good morning 😊</p>
|
||||
</div>
|
||||
<div class="dropdown align-self-start message-box-drop">
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ri-more-2-fill"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#"><i class="ri-reply-line me-2 text-muted align-bottom"></i>Reply</a>
|
||||
<a class="dropdown-item" href="#"><i class="ri-file-copy-line me-2 text-muted align-bottom"></i>Copy</a>
|
||||
<a class="dropdown-item delete-item" href="#"><i class="ri-delete-bin-5-line me-2 text-muted align-bottom"></i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-name"><small class="text-muted time">09:07
|
||||
am</small> <span class="text-success check-message-icon"><i class="ri-check-double-line align-bottom"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- chat-list -->
|
||||
|
||||
<li class="chat-list right">
|
||||
<div class="conversation-list">
|
||||
<div class="user-chat-content">
|
||||
<div class="ctext-wrap">
|
||||
<div class="ctext-wrap-content">
|
||||
<p class="mb-0 ctext-content">Good morning, How are you? What about
|
||||
our next meeting?</p>
|
||||
</div>
|
||||
<div class="dropdown align-self-start message-box-drop">
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ri-more-2-fill"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#"><i class="ri-reply-line me-2 text-muted align-bottom"></i>Reply</a>
|
||||
<a class="dropdown-item" href="#"><i class="ri-file-copy-line me-2 text-muted align-bottom"></i>Copy</a>
|
||||
<a class="dropdown-item delete-item" href="#"><i class="ri-delete-bin-5-line me-2 text-muted align-bottom"></i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-name"><small class="text-muted time">09:08
|
||||
am</small> <span class="text-success check-message-icon"><i class="ri-check-double-line align-bottom"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- chat-list -->
|
||||
|
||||
<li class="chat-list left">
|
||||
<div class="conversation-list">
|
||||
<div class="chat-avatar">
|
||||
<img src="assets/images/users/avatar-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="user-chat-content">
|
||||
<div class="ctext-wrap">
|
||||
<div class="ctext-wrap-content">
|
||||
<p class="mb-0 ctext-content">Yeah everything is fine. Our next
|
||||
meeting tomorrow at 10.00 AM</p>
|
||||
</div>
|
||||
<div class="dropdown align-self-start message-box-drop">
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ri-more-2-fill"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#"><i class="ri-reply-line me-2 text-muted align-bottom"></i>Reply</a>
|
||||
<a class="dropdown-item" href="#"><i class="ri-file-copy-line me-2 text-muted align-bottom"></i>Copy</a>
|
||||
<a class="dropdown-item delete-item" href="#"><i class="ri-delete-bin-5-line me-2 text-muted align-bottom"></i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-name"><small class="text-muted time">09:10
|
||||
am</small> <span class="text-success check-message-icon"><i class="ri-check-double-line align-bottom"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- chat-list -->
|
||||
|
||||
<li class="chat-list right">
|
||||
<div class="conversation-list">
|
||||
<div class="user-chat-content">
|
||||
<div class="ctext-wrap">
|
||||
<div class="ctext-wrap-content">
|
||||
<p class="mb-0 ctext-content">Wow that's great</p>
|
||||
</div>
|
||||
<div class="dropdown align-self-start message-box-drop">
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ri-more-2-fill"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#"><i class="ri-reply-line me-2 text-muted align-bottom"></i>Reply</a>
|
||||
<a class="dropdown-item" href="#"><i class="ri-file-copy-line me-2 text-muted align-bottom"></i>Copy</a>
|
||||
<a class="dropdown-item delete-item" href="#"><i class="ri-delete-bin-5-line me-2 text-muted align-bottom"></i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-name"><small class="text-muted time">09:12
|
||||
am</small> <span class="text-success check-message-icon"><i class="ri-check-double-line align-bottom"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- chat-list -->
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-top border-top-dashed">
|
||||
<div class="row g-2 mx-3 mt-2 mb-3">
|
||||
<div class="col">
|
||||
<div class="position-relative">
|
||||
<input type="text" class="form-control border-light bg-light" placeholder="Enter Message...">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-info"><i class="mdi mdi-send"></i></button>
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div><!-- end cardbody -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end email chat detail -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
<!-- Compose Modal -->
|
||||
<div class="modal fade" id="composemodal" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header p-3 bg-light">
|
||||
<h5 class="modal-title" id="composemodalTitle">New Message</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<div class="mb-3 position-relative">
|
||||
<input type="text" class="form-control email-compose-input" data-choices data-choices-limit="15" value="support@themesbrand.com" data-choices-removeItem placeholder="To">
|
||||
<div class="position-absolute top-0 end-0">
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-link text-reset fw-semibold px-2" type="button" data-bs-toggle="collapse" data-bs-target="#CcRecipientsCollapse" aria-expanded="false" aria-controls="CcRecipientsCollapse">
|
||||
Cc
|
||||
</button>
|
||||
<button class="btn btn-link text-reset fw-semibold px-2" type="button" data-bs-toggle="collapse" data-bs-target="#BccRecipientsCollapse" aria-expanded="false" aria-controls="BccRecipientsCollapse">
|
||||
Bcc
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="CcRecipientsCollapse">
|
||||
<div class="mb-3">
|
||||
<label>Cc:</label>
|
||||
<input type="text" class="form-control" data-choices data-choices-limit="15" data-choices-removeItem placeholder="Cc recipients">
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="BccRecipientsCollapse">
|
||||
<div class="mb-3">
|
||||
<label>Bcc:</label>
|
||||
<input type="text" class="form-control" data-choices data-choices-limit="15" data-choices-removeItem placeholder="Bcc recipients">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" placeholder="Subject">
|
||||
</div>
|
||||
<div class="ck-editor-reverse">
|
||||
<div id="email-editor"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-ghost-danger" data-bs-dismiss="modal">Discard</button>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Send</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="#"><i class="ri-timer-line text-muted me-1 align-bottom"></i> Schedule Send</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end modal -->
|
||||
|
||||
<!-- removeItemModal -->
|
||||
<div id="removeItemModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you Sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you Sure You want to Remove this Record ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger " id="delete-record">Yes, Delete
|
||||
It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!--ckeditor js-->
|
||||
<script src="/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
|
||||
|
||||
<!-- mailbox init -->
|
||||
<script src="/assets/js/pages/mailbox.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,451 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Live Auction')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
<!-- nouisliderribute css -->
|
||||
<link rel="stylesheet" href="/assets/libs/nouislider/nouislider.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Live Auction','NFT Marketplace')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-9">
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<div class="d-lg-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="card-title mb-0">Live Auction</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mt-4 mt-lg-0">
|
||||
<ul class="nav nav-pills filter-btns" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-medium active" type="button" data-filter="all">All
|
||||
Items</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-medium" type="button" data-filter="upto-15">Up to
|
||||
15%</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-medium" type="button" data-filter="upto-30">Up to
|
||||
30%</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-medium" type="button" data-filter="upto-40">Up to
|
||||
40%</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xxl-3 col-lg-4 col-md-6 product-item upto-15">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="position-relative rounded overflow-hidden">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="card-img-top explore-img">
|
||||
<div class="discount-time">
|
||||
<h5 id="auction-time-1" class="mb-0 text-white"></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 19.29k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 97.8 ETH </h5>
|
||||
<h6 class="fs-16 mb-3"><a href="/apps-nft-item-details" class="text-reset">Abstract Face Painting</a>
|
||||
</h6>
|
||||
<div>
|
||||
<span class="text-muted float-end">Available: 436</span>
|
||||
<span class="text-muted">Sold: 4187</span>
|
||||
<div class="progress progress-sm mt-2">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 67%;" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-lg-4 col-md-6 product-item upto-30">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="position-relative rounded overflow-hidden">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="card-img-top explore-img">
|
||||
<div class="discount-time">
|
||||
<h5 id="auction-time-2" class="mb-0 text-white"></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 8.42k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 245.23ETH </h5>
|
||||
<h6 class="fs-16 mb-3"><a href="/apps-nft-item-details" class="text-reset">Patterns Arts & Culture</a>
|
||||
</h6>
|
||||
<div>
|
||||
<span class="text-muted float-end">Available: 8974</span>
|
||||
<span class="text-muted">Sold: 13</span>
|
||||
<div class="progress progress-sm mt-2">
|
||||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-lg-4 col-md-6 product-item upto-40">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="position-relative rounded overflow-hidden">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="card-img-top explore-img">
|
||||
<div class="discount-time">
|
||||
<h5 id="auction-time-3" class="mb-0 text-white"></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 19.29k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 67.36 ETH </h5>
|
||||
<h6 class="fs-16 mb-3"><a href="/apps-nft-item-details" class="text-reset">Creative Filtered
|
||||
Portrait</a></h6>
|
||||
<div>
|
||||
<span class="text-muted float-end">Available: 3620</span>
|
||||
<span class="text-muted">Sold: 345</span>
|
||||
<div class="progress progress-sm mt-2">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-lg-4 col-md-6 product-item upto-15">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="position-relative rounded overflow-hidden">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt="" class="card-img-top explore-img">
|
||||
<div class="discount-time">
|
||||
<h5 id="auction-time-4" class="mb-0 text-white"></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 34.12k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 34.81 ETH </h5>
|
||||
<h6 class="fs-16 mb-3"><a href="/apps-nft-item-details" class="text-reset">Smillevers Crypto</a></h6>
|
||||
<div>
|
||||
<span class="text-muted float-end">Available: 3521</span>
|
||||
<span class="text-muted">Sold: 1457</span>
|
||||
<div class="progress progress-sm mt-2">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 67%;" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-lg-4 col-md-6 product-item upto-40">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="position-relative rounded overflow-hidden">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt="" class="card-img-top explore-img">
|
||||
<div class="discount-time">
|
||||
<h5 id="auction-time-5" class="mb-0 text-white"></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 47.12k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 245.23ETH </h5>
|
||||
<h6 class="fs-16 mb-3"><a href="/apps-nft-item-details" class="text-reset">Long-tailed Macaque</a></h6>
|
||||
<div>
|
||||
<span class="text-muted float-end">Available: 30</span>
|
||||
<span class="text-muted">Sold: 1369</span>
|
||||
<div class="progress progress-sm mt-2">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-lg-4 col-md-6 product-item upto-15">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="position-relative rounded overflow-hidden">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="card-img-top explore-img">
|
||||
<div class="discount-time">
|
||||
<h5 id="auction-time-6" class="mb-0 text-white"></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 23.63k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 394.7 ETH </h5>
|
||||
<h6 class="fs-16 mb-3"><a href="/apps-nft-item-details" class="text-reset">The Chirstoper</a></h6>
|
||||
<div>
|
||||
<span class="text-muted float-end">Available: 1474</span>
|
||||
<span class="text-muted">Sold: 7451</span>
|
||||
<div class="progress progress-sm mt-2">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 83%;" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-lg-4 col-md-6 product-item upto-30">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="position-relative rounded overflow-hidden">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="card-img-top explore-img">
|
||||
<div class="discount-time">
|
||||
<h5 id="auction-time-7" class="mb-0 text-white"></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 36.42k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 745.14 ETH </h5>
|
||||
<h6 class="fs-16 mb-3"><a href="/apps-nft-item-details" class="text-reset">Robotic Body Art</a></h6>
|
||||
<div>
|
||||
<span class="text-muted float-end">Available: 4563</span>
|
||||
<span class="text-muted">Sold: 1024</span>
|
||||
<div class="progress progress-sm mt-2">
|
||||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 24%;" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-lg-4 col-md-6 product-item upto-15">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="position-relative rounded overflow-hidden">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-4.gif" alt="" class="card-img-top explore-img">
|
||||
<div class="discount-time">
|
||||
<h5 id="auction-time-8" class="mb-0 text-white"></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 94.1k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 245.23ETH </h5>
|
||||
<h6 class="fs-16 mb-3"><a href="/apps-nft-item-details" class="text-reset">Evolved Reality</a></h6>
|
||||
<div>
|
||||
<span class="text-muted float-end">Available: 26</span>
|
||||
<span class="text-muted">Sold: 9974</span>
|
||||
<div class="progress progress-sm mt-2">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 97%;" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mb-3">
|
||||
<button class="btn btn-link text-success mt-2"><i class="mdi mdi-loading mdi-spin fs-20 align-middle me-2"></i> Load more </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
<h6 class="card-title mb-0 flex-grow-1">Top Drop</h6>
|
||||
<a class="text-muted" href="#">
|
||||
See All <i class="ri-arrow-right-line align-bottom"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless align-middle">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="/apps-nft-item-details">
|
||||
<h6 class="fs-15 mb-1">Creative filtered portrait</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">Sold at 34.81 ETH</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><small>Just Now</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-4.gif" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="/apps-nft-item-details">
|
||||
<h6 class="fs-15 mb-1">Patterns arts & culture</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">Sold at 147.83 ETH</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><small>3 sec ago</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="/apps-nft-item-details">
|
||||
<h6 class="fs-15 mb-1">Evolved Reality</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">Sold at 34.81 ETH</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><small>2 min ago</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="/apps-nft-item-details">
|
||||
<h6 class="fs-15 mb-1">Smillevers Crypto</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">Sold at 47.9 ETH</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><small>26 min ago</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="/apps-nft-item-details">
|
||||
<h6 class="fs-15 mb-1">Robotic Body Art</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">Sold at 134.32 ETH</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><small>1 hrs ago</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="/apps-nft-item-details">
|
||||
<h6 class="fs-15 mb-1">Trendy fashion portraits</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">Sold at 643.19 ETH</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><small>3 hrs ago</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
<h6 class="card-title mb-0 flex-grow-1">Top Creator</h6>
|
||||
<a class="text-muted" href="/apps-nft-item-details">
|
||||
See All <i class="ri-arrow-right-line align-bottom"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless align-middle">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-1.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="fs-15 mb-1">Herbert Stokes</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">23 Products</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><button class="btn btn-secondary btn-sm">Follow</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="fs-15 mb-1">Thomas Taylor</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">123 Products</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><button class="btn btn-soft-secondary btn-sm">Unfllow</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-5.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="fs-15 mb-1">Henry Baird</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">46 Products</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><button class="btn btn-secondary btn-sm">Follow</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="fs-15 mb-1">Nancy Martino</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">845 Products</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><button class="btn btn-secondary btn-sm">Follow</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="avatar-sm object-cover rounded-circle">
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="fs-15 mb-1">James Price</h6>
|
||||
</a>
|
||||
<p class="mb-0 text-muted">318 Products</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><button class="btn btn-soft-secondary btn-sm">Unfllow</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<script src="/assets/js/pages/apps-nft-auction.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,269 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Collections')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Collections','NFT Marketplace')"></div>
|
||||
<div class="row g-4 mb-3 align-items-center">
|
||||
<div class="col-sm-auto">
|
||||
<div>
|
||||
<h5 class="mb-0">Top Collections</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-sm">
|
||||
<div class="d-flex justify-content-sm-end gap-2">
|
||||
<div class="search-box ms-2">
|
||||
<input type="text" class="form-control" placeholder="Search...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
|
||||
<select class="form-control w-md" data-choices data-choices-search-false>
|
||||
<option value="All">All</option>
|
||||
<option value="Today" selected>Today</option>
|
||||
<option value="Yesterday">Yesterday</option>
|
||||
<option value="Last 7 Days">Last 7 Days</option>
|
||||
<option value="Last 30 Days">Last 30 Days</option>
|
||||
<option value="This Month">This Month</option>
|
||||
<option value="Last Year">Last Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-6">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Artwork <span class="badge badge-soft-success">206</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-6">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-4.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Crypto Card <span class="badge badge-soft-success">743</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-6">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Music <span class="badge badge-soft-success">679</span></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-6">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Games <span class="badge badge-soft-success">341</span></a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-6">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Photography <span class="badge badge-soft-success">1452</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-6">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-4.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">3d Style <span class="badge badge-soft-success">4781</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-6">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Collectibles <span class="badge badge-soft-success">3468</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-6">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Videos <span class="badge badge-soft-success">1674</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row g-0 text-center text-sm-start align-items-center mb-4">
|
||||
<div class="col-sm-6">
|
||||
<div>
|
||||
<p class="mb-sm-0 text-muted">Showing <span class="fw-semibold">1</span> to <span class="fw-semibold">8</span> of <span class="fw-semibold text-decoration-underline">12</span> entries</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<ul class="pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
|
||||
<li class="page-item disabled">
|
||||
<a href="#" class="page-link">Previous</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item ">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">4</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">5</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,123 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Create NFT')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Filepond css -->
|
||||
<link rel="stylesheet" href="/assets/libs/filepond/filepond.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Create NFT','NFT Marketplace')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Create New File</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<h5 class="fw-semibold mb-3">Image, Video, Audio, or 3D Model</h5>
|
||||
<input type="file" class="filepond filepond-input-multiple" multiple name="filepond"
|
||||
data-allow-reorder="true" data-max-file-size="3MB" data-max-files="2">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<label for="productName" class="form-label">Product Name</label>
|
||||
<input type="text" class="form-control" id="productName"
|
||||
placeholder="Enter product name">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<label for="discription" class="form-label">Discription</label>
|
||||
<textarea class="form-control" id="discription" rows="3"
|
||||
placeholder="Enter discription"></textarea>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<label for="externalLink" class="form-label">External link</label>
|
||||
<input type="text" class="form-control" id="externalLink"
|
||||
placeholder="Enter external link">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<label for="itemPrice" class="form-label">Item Price</label>
|
||||
<input type="text" class="form-control" id="itemPrice" placeholder="Price">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<label for="size" class="form-label">Size</label>
|
||||
<input type="text" class="form-control" id="size" placeholder="Size">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4">
|
||||
<label for="properties" class="form-label">Properties</label>
|
||||
<input type="text" class="form-control" id="properties" placeholder="Properties">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1"
|
||||
value="option1">
|
||||
<label class="form-check-label" for="inlineCheckbox1">Put on sale</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2"
|
||||
value="option2">
|
||||
<label class="form-check-label" for="inlineCheckbox2">Instant sale
|
||||
price</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3"
|
||||
value="option3">
|
||||
<label class="form-check-label" for="inlineCheckbox3">Unlock one
|
||||
purchased</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div class="text-end">
|
||||
<button class="btn btn-primary">Create Item</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- filepond js -->
|
||||
<script src="/assets/libs/filepond/filepond.min.js"></script>
|
||||
<script src="/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
|
||||
<script src="/assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js"></script>
|
||||
<script src="/assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js"></script>
|
||||
<script src="/assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js"></script>
|
||||
|
||||
<!--nft create init js-->
|
||||
<script src="/assets/js/pages/apps-nft-create.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,508 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Creators')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Creators','NFT Marketplace')"></div>
|
||||
|
||||
<div class="row g-4 mb-3">
|
||||
<div class="col-sm-auto">
|
||||
<div>
|
||||
<a href="/apps-projects-create" class="btn btn-secondary"><i class="ri-add-line align-bottom me-1"></i> Add New</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="d-flex justify-content-sm-end gap-2">
|
||||
<div class="search-box ms-2">
|
||||
<input type="text" class="form-control" placeholder="Search...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
|
||||
<select class="form-control w-md" data-choices data-choices-search-false>
|
||||
<option value="All">All</option>
|
||||
<option value="Today">Today</option>
|
||||
<option value="Yesterday" selected>Yesterday</option>
|
||||
<option value="Last 7 Days">Last 7 Days</option>
|
||||
<option value="Last 30 Days">Last 30 Days</option>
|
||||
<option value="This Month">This Month</option>
|
||||
<option value="Last Year">Last Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="avatar-sm object-cover rounded">
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mb-1">Timothy Smith</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0"><i class="mdi mdi-ethereum text-primary fs-14"></i> 4,754 ETH
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Share</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#!" data-bs-toggle="modal">Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-5.jpg" alt="" class="avatar-sm object-cover rounded">
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mb-1">Alexis Clarke</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0"><i class="mdi mdi-ethereum text-primary fs-14"></i> 81,369
|
||||
ETH</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Share</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#!" data-bs-toggle="modal">Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="avatar-sm object-cover rounded">
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mb-1">Glen Matney</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0"><i class="mdi mdi-ethereum text-primary fs-14"></i> 13,156
|
||||
ETH</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Share</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#!" data-bs-toggle="modal">Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt="" class="avatar-sm object-cover rounded">
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mb-1">Herbert Stokes</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0"><i class="mdi mdi-ethereum text-primary fs-14"></i> 34,754
|
||||
ETH</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Share</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#!" data-bs-toggle="modal">Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="avatar-sm object-cover rounded">
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mb-1">Michael Morris</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0"><i class="mdi mdi-ethereum text-primary fs-14"></i> 13,841
|
||||
ETH</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Share</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#!" data-bs-toggle="modal">Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt="" class="avatar-sm object-cover rounded">
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mb-1">Nancy Martino</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0"><i class="mdi mdi-ethereum text-primary fs-14"></i> 26,834
|
||||
ETH</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Share</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#!" data-bs-toggle="modal">Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="avatar-sm object-cover rounded">
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mb-1">Mary Cousar</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0"><i class="mdi mdi-ethereum text-primary fs-14"></i> 18,034
|
||||
ETH</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Share</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#!" data-bs-toggle="modal">Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="avatar-sm object-cover rounded">
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mb-1">James Morris</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-0"><i class="mdi mdi-ethereum text-primary fs-14"></i> 63,710
|
||||
ETH</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Share</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#!" data-bs-toggle="modal">Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h5 class="card-title mb-4 fw-semibold fs-16">Creators Grid Lists</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Michael Morris</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">9784 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-soft-primary w-100">Unfollow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/users/avatar-6.jpg" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Charles Kubik</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">4678 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-primary w-100">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Alexis Clarke</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">861 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-soft-primary w-100">Unfollow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">James Morris</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">30174 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-soft-primary w-100">Unfollow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Herbert Stokes</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">6487 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-primary w-100">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Michael Morris</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">10137/ Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-soft-primary w-100">Unfollow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/users/avatar-6.jpg" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Tonya Noble</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">364 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-primary w-100">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Nancy Martino</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">9513 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-soft-primary w-100">Unfollow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Kevin Dawson</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">6374 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-primary w-100">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-4.gif" alt="" class="object-cover card-img-top" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-md rounded-circle object-cover mt-n5 img-thumbnail border-light mx-auto d-block">
|
||||
<a href="/pages-profile">
|
||||
<h5 class="mt-2 mb-1">Glen Matney</h5>
|
||||
</a>
|
||||
<p class="text-muted mb-2">7809 Products</p>
|
||||
<p class="text-muted">You can make an NFT of a digital painting, a text, a piece of music, a
|
||||
video.</p>
|
||||
<button class="btn btn-soft-primary w-100">Unfollow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row g-0 text-center text-sm-start align-items-center mb-4">
|
||||
<div class="col-sm-6">
|
||||
<div>
|
||||
<p class="mb-sm-0 text-muted">Showing <span class="fw-semibold">1</span> to <span class="fw-semibold">10</span> of <span class="fw-semibold text-decoration-underline">12</span> entries</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<ul class="pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
|
||||
<li class="page-item disabled">
|
||||
<a href="#" class="page-link">Previous</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item ">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">4</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">5</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,124 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Explore Now')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
<!-- nouisliderribute css -->
|
||||
<link rel="stylesheet" href="/assets/libs/nouislider/nouislider.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Explore Now','NFT Marketplace')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<h5 class="card-title mb-0 flex-grow-1">Explore Product</h5>
|
||||
<div>
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample"><i class="ri-filter-2-line align-bottom"></i> Filters</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collaps show" id="collapseExample">
|
||||
<div class="row row-cols-xxl-5 row-cols-lg-3 row-cols-md-2 row-cols-1 mt-3 g-3">
|
||||
<div class="col">
|
||||
<h6 class="text-uppercase fs-12 mb-2">Search</h6>
|
||||
<input type="text" class="form-control" placeholder="Search product name" autocomplete="off" id="searchProductList">
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6 class="text-uppercase fs-12 mb-2">Select Category</h6>
|
||||
<select class="form-control" data-choices name="select-category" data-choices-search-false id="select-category">
|
||||
<option value="">Select Category</option>
|
||||
<option value="Artwork">Artwork</option>
|
||||
<option value="3d Style">3d Style</option>
|
||||
<option value="Photography">Photography</option>
|
||||
<option value="Collectibles">Collectibles</option>
|
||||
<option value="Crypto Card">Crypto Card</option>
|
||||
<option value="Games">Games</option>
|
||||
<option value="Music">Music</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6 class="text-uppercase fs-12 mb-2">File Type</h6>
|
||||
<select class="form-control" data-choices name="file-type" data-choices-search-false id="file-type">
|
||||
<option value="">File Type</option>
|
||||
<option value="jpg">Images</option>
|
||||
<option value="mp4">Video</option>
|
||||
<option value="mp3">Audio</option>
|
||||
<option value="gif">Gif</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6 class="text-uppercase fs-12 mb-2">Sales Type</h6>
|
||||
<select class="form-control" data-choices name="all-sales-type" data-choices-search-false id="all-sales-type">
|
||||
<option value="">All Sales Type</option>
|
||||
<option value="On Auction">On Auction</option>
|
||||
<option value="Has Offers">Has Offers</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6 class="text-uppercase fs-12 mb-4">Price</h6>
|
||||
<div class="slider" id="range-product-price"></div>
|
||||
<input class="form-control" type="hidden" id="minCost" value="0" />
|
||||
<input class="form-control" type="hidden" id="maxCost" value="1000" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted fs-14 mb-0">Result: 8745</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown">
|
||||
<a class="text-muted fs-14 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
All View
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row row-cols-xxl-5 row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-1" id="explorecard-list">
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="py-4 text-center" id="noresult" style="display: none;">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:72px;height:72px"></lord-icon>
|
||||
<h5 class="mt-4">Sorry! No Result Found</h5>
|
||||
</div>
|
||||
<div class="text-center mb-3">
|
||||
<button class="btn btn-link text-secondary mt-2" id="loadmore"><i class="mdi mdi-loading mdi-spin fs-20 align-middle me-2"></i> Load More </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- nouisliderribute js -->
|
||||
<script src="/assets/libs/nouislider/nouislider.min.js"></script>
|
||||
<script src="/assets/libs/wnumb/wNumb.min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/apps-nft-explore.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,594 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Item Details')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Item Details','NFT Marketplace')"></div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4">
|
||||
<div class="sticky-side-div">
|
||||
<div class="card ribbon-box border shadow-none right">
|
||||
<div class="ribbon-two ribbon-two-danger"><span><i class="ri-fire-fill align-bottom"></i> Hot</span></div>
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="img-fluid rounded">
|
||||
<div class="position-absolute bottom-0 p-3">
|
||||
<div class="position-absolute top-0 end-0 start-0 bottom-0 bg-white opacity-25">
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt="" class="img-fluid rounded h-100 object-cover">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hstack gap-2">
|
||||
<button class="btn btn-primary w-100">Place Bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<div class="dropdown float-end">
|
||||
<button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle fs-16"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);"><i class="ri-eye-fill align-bottom me-2 text-muted"></i>View</a></li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
|
||||
<li><a class="dropdown-item remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span class="badge badge-soft-secondary mb-3 fs-12"><i class="ri-eye-line me-1 align-bottom"></i>
|
||||
8,634 people views this</span>
|
||||
<h4>Patterns Arts & Culture</h4>
|
||||
<div class="hstack gap-3 flex-wrap">
|
||||
<div class="text-muted">Creators : <a href="#" class="text-primary fw-medium">Nancy
|
||||
Martino</a></div>
|
||||
<div class="vr"></div>
|
||||
<div class="text-muted">Seller : <span class="text-body fw-medium">Rickey Teran</span>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="text-muted">Published : <span class="text-body fw-medium">29 April,
|
||||
2022</span></div>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center mt-3">
|
||||
<div class="text-muted fs-16">
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
<span class="mdi mdi-star text-warning"></span>
|
||||
</div>
|
||||
<div class="text-muted">( 5.50k Customer Review )</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="p-2 border border-dashed rounded text-center">
|
||||
<div>
|
||||
<p class="text-muted fw-medium mb-1">Price :</p>
|
||||
<h5 class="fs-16 text-success mb-0"><i class="mdi mdi-ethereum me-1"></i>
|
||||
83.06 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="p-2 border border-dashed rounded text-center">
|
||||
<div>
|
||||
<p class="text-muted fw-medium mb-1">Highest bid</p>
|
||||
<h5 class="fs-16 mb-0">104.63 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="p-2 border border-dashed rounded text-center">
|
||||
<div>
|
||||
<p class="text-muted fw-medium mb-1">Stock</p>
|
||||
<h5 class="fs-16 mb-0">12/58 Sale</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="p-2 border border-dashed rounded text-center">
|
||||
<div>
|
||||
<p class="text-muted fw-medium mb-1">Auction Ends:</p>
|
||||
<h5 id="auction-time-1" class="mb-0"></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<div class="mt-4 text-muted">
|
||||
<h5 class="fs-14">Description :</h5>
|
||||
<p>Cultural patterns are the similar behaviors within similar situations we witness due
|
||||
to shared beliefs, values, norms and social practices that are steady over time. In
|
||||
art, a pattern is a repetition of specific visual elements. The dictionary.com
|
||||
definition of "pattern" is: an arrangement of repeated or corresponding parts,
|
||||
decorative motifs, etc.</p>
|
||||
</div>
|
||||
<div class="product-content mt-5">
|
||||
<h5 class="fs-14 mb-3">Product Description :</h5>
|
||||
<nav>
|
||||
<ul class="nav nav-tabs nav-tabs-custom nav-success" id="nav-tab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="nav-speci-tab" data-bs-toggle="tab" href="#nav-speci" role="tab" aria-controls="nav-speci" aria-selected="true">Place Bids</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="nav-additional-tab" data-bs-toggle="tab" href="#nav-additional" role="tab" aria-controls="nav-additional" aria-selected="false">Additional Information</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="nav-detail-tab" data-bs-toggle="tab" href="#nav-detail" role="tab" aria-controls="nav-detail" aria-selected="false">Details</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="tab-content border border-top-0 p-4" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-speci" role="tabpanel" aria-labelledby="nav-speci-tab">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle table-nowrap mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="avatar-xs rounded object-cover" />
|
||||
<a href="apps-nft-item-details.html" class="link-dark"><span class="mb-0 ms-2">Brave
|
||||
Tigers NFT</span></a>
|
||||
</div>
|
||||
</th>
|
||||
<td>0.235 ETH</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-1.jpg" alt="" class="avatar-xs rounded object-cover" />
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="mb-1">Alexis Clarke</h6>
|
||||
</a>
|
||||
<p class="text-muted mb-0">Creators</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>29 min ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="avatar-xs rounded object-cover" />
|
||||
<a href="apps-nft-item-details.html" class="link-dark"><span class="mb-0 ms-2">Creative
|
||||
filtered portrait</span></a>
|
||||
</div>
|
||||
</th>
|
||||
<td>571.24 ETH</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded object-cover" />
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="mb-1">Glen Matney</h6>
|
||||
</a>
|
||||
<p class="text-muted mb-0">Creators</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>37 min ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-4.gif" alt="" class="avatar-xs rounded object-cover" />
|
||||
<a href="apps-nft-item-details.html" class="link-dark"><span class="mb-0 ms-2">Evolved
|
||||
Reality</span></a>
|
||||
</div>
|
||||
</th>
|
||||
<td>130.39 ETH</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-5.jpg" alt="" class="avatar-xs rounded object-cover" />
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="mb-1">Herbert Stokes</h6>
|
||||
</a>
|
||||
<p class="text-muted mb-0">Creators</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>1 hrs ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="avatar-xs rounded object-cover" />
|
||||
<a href="apps-nft-item-details.html" class="link-dark"><span class="mb-0 ms-2">Robotic
|
||||
Body Art</span></a>
|
||||
</div>
|
||||
</th>
|
||||
<td>81.72 ETH</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="avatar-xs rounded object-cover" />
|
||||
<div class="ms-2">
|
||||
<a href="#!">
|
||||
<h6 class="mb-1">Michael Morris</h6>
|
||||
</a>
|
||||
<p class="text-muted mb-0">Creators</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>1 hrs ago</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-additional" role="tabpanel" aria-labelledby="nav-additional-tab">
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" style="width: 200px;">Size</th>
|
||||
<td>650 x 650px (66.8 KB)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Brand</th>
|
||||
<td>Patterns arts & culture </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Formats</th>
|
||||
<td>JPEG / PNG / PDF</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Token</th>
|
||||
<td>VLZ74516523</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Blockchain</th>
|
||||
<td>Ethereum</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Contacts</th>
|
||||
<td>E545D145S5646544DS541SFDB213C5Z</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-detail" role="tabpanel" aria-labelledby="nav-detail-tab">
|
||||
<div>
|
||||
<h5 class="font-size-16 mb-3">Patterns arts & culture</h5>
|
||||
<p>Cultural patterns are the similar behaviors within similar situations we
|
||||
witness due to shared beliefs, values, norms and social practices that
|
||||
are steady over time. In art, a pattern is a repetition of specific
|
||||
visual elements. The dictionary.com definition of "pattern" is: an
|
||||
arrangement of repeated or corresponding parts, decorative motifs, etc.
|
||||
</p>
|
||||
<div>
|
||||
<p class="mb-2"><i class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
On digital or printed media</p>
|
||||
<p class="mb-2"><i class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
For commercial and personal projects</p>
|
||||
<p class="mb-2"><i class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
From anywhere in the world</p>
|
||||
<p class="mb-0"><i class="mdi mdi-circle-medium me-1 text-muted align-middle"></i>
|
||||
Full copyrights sale</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<div>
|
||||
<h5 class="fs-14 mb-3">Ratings & Reviews</h5>
|
||||
</div>
|
||||
<div class="row gy-4 gx-0">
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<div class="pb-3">
|
||||
<div class="bg-light px-3 py-2 rounded-2 mb-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<div class="fs-16 align-middle text-warning">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<h6 class="mb-0">4.8 out of 5</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-muted">Total <span class="fw-medium">7.32k</span>
|
||||
reviews
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">5 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 50.16%" aria-valuenow="50.16" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">2758</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">4 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 19.32%" aria-valuenow="19.32" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">1063</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">3 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 18.12%" aria-valuenow="18.12" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">997</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">2 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 7.42%" aria-valuenow="7.42" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">408</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row align-items-center g-2">
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0">1 star</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="p-2">
|
||||
<div class="progress animated-progress progress-sm">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 4.98%" aria-valuenow="4.98" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="p-2">
|
||||
<h6 class="mb-0 text-muted">274</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="ps-lg-4">
|
||||
<div class="d-flex flex-wrap align-items-start gap-3">
|
||||
<h5 class="fs-14">Reviews: </h5>
|
||||
</div>
|
||||
|
||||
<div class="me-lg-n3 pe-lg-4" data-simplebar style="max-height: 225px;">
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="py-2">
|
||||
<div class="border border-dashed rounded p-3">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<div class="hstack gap-3">
|
||||
<div class="text-warning">
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
<i class="mdi mdi-star"></i>
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0"> Superb Artwork</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-grow-1 gap-2 mb-3">
|
||||
<a href="#" class="d-block">
|
||||
<img src="/assets/images/small/img-12.jpg" alt="" class="avatar-sm rounded object-cover" />
|
||||
</a>
|
||||
<a href="#" class="d-block">
|
||||
<img src="/assets/images/small/img-11.jpg" alt="" class="avatar-sm rounded object-cover" />
|
||||
</a>
|
||||
<a href="#" class="d-block">
|
||||
<img src="/assets/images/small/img-10.jpg" alt="" class="avatar-sm rounded object-cover" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-end">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Henry</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13 mb-0">12 Jul, 21</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="border border-dashed rounded p-3">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<div class="hstack gap-3">
|
||||
<div class="badge rounded-pill bg-success mb-0">
|
||||
<i class="mdi mdi-star"></i> 4.0
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-0"> Great at this price,
|
||||
Product quality and look is awesome.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Nancy</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13 mb-0">06 Jul, 21</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="border border-dashed rounded p-3">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<div class="hstack gap-3">
|
||||
<div class="badge rounded-pill bg-success mb-0">
|
||||
<i class="mdi mdi-star"></i> 4.2
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-0">Good product. I am so
|
||||
happy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Joseph</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13 mb-0">06 Jul, 21</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="border border-dashed rounded p-3">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<div class="hstack gap-3">
|
||||
<div class="badge rounded-pill bg-success mb-0">
|
||||
<i class="mdi mdi-star"></i> 4.1
|
||||
</div>
|
||||
<div class="vr"></div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-0">Nice Product, Good
|
||||
Quality.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-14 mb-0">Jimmy</h5>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-muted fs-13 mb-0">24 Jun, 21</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end Ratings & Reviews -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
|
||||
<script src="/assets/js/pages/apps-nft-item-details.init.js"></script>
|
||||
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,527 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Marketplace')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Marketplace','NFT Marketplace')"></div>
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-lg-6">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-4.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Crypto Card <span class="badge badge-soft-success">743</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-lg-6">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Artwork <span class="badge badge-soft-success">206</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-1 mb-3">
|
||||
<div class="col-lg-6">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="img-fluid rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt="" class="img-fluid rounded mt-1">
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="img-fluid rounded mb-1">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
<a href="#!" class="float-end"> View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
<h5 class="mb-0 fs-16"><a href="#!" class="text-reset">Music <span class="badge badge-soft-success">679</span></a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xl-4">
|
||||
<div class="alert alert-danger">
|
||||
Up to <b>50% OFF</b>, Hurry up before the stock ends
|
||||
</div>
|
||||
<div class="card bg-primary" style="background-image: url('assets/images/nft/bg-pattern.png');">
|
||||
<div class="card-body p-4">
|
||||
<span class="badge bg-info fw-medium mb-3 fs-12">Trending Artwork</span>
|
||||
<h4 class="text-white lh-base">Discover, Collect, Sell and Create your own NFT</h4>
|
||||
<p class="text-white-75 mb-3">Take advantage of the first text-based NFT. Select a text or write your own and let it live forever on the Ethereum blockchain you or future owners can add text to an existing ChainText token..</p>
|
||||
<div class="hstack gap-2">
|
||||
<a href="apps-nft-create.html" class="btn btn-success">Create NFT</a>
|
||||
<a href="apps-nft-explore.html" class="btn btn-danger">Explore Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden shadow-none">
|
||||
<div class="card-body bg-soft-success text-success fw-semibold d-flex">
|
||||
<marquee class="fs-14">
|
||||
NFT art is a digital asset that is collectable, unique, and non-transferrable, Cortes explained. Every NFT is unique in it's creative design and cannot be duplicated, making them limited and rare. NFTs get their value because the transaction proves ownership of the art.
|
||||
</marquee>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="d-lg-flex align-items-center mb-4">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="card-title mb-0 fw-semibold fs-16">Trending Artwork</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mt-4 mt-lg-0">
|
||||
<a href="apps-nft-explore.html" class="btn btn-soft-secondary">View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1">
|
||||
<div class="col">
|
||||
<div class="card explore-box">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
<div class="ms-2 flex-grow-1">
|
||||
<h6 class="mb-0 fs-15">Nancy Martino</h6>
|
||||
<p class="mb-0 text-muted">Owners</p>
|
||||
</div>
|
||||
<div class="bookmark-icon">
|
||||
<button type="button" class="btn btn-icon active" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-place-bid-img overflow-hidden rounded">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="img-fluid explore-img">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 19.29k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 97.8 ETH </h5>
|
||||
<h6 class="fs-16 mb-0"><a href="apps-nft-item-details.html" class="text-reset">Patterns Arts & Culture</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card explore-box">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="/assets/images/users/avatar-9.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
<div class="ms-2 flex-grow-1">
|
||||
<h6 class="mb-0 fs-15">Henry Baird</h6>
|
||||
<p class="mb-0 text-muted">Creators</p>
|
||||
</div>
|
||||
<div class="bookmark-icon">
|
||||
<button type="button" class="btn btn-icon" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-place-bid-img overflow-hidden rounded">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="img-fluid explore-img">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 31.64k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 475.23 ETH </h5>
|
||||
<h6 class="fs-16 mb-0"><a href="apps-nft-item-details.html" class="text-reset">Evolved Reality</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card explore-box">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
<div class="ms-2 flex-grow-1">
|
||||
<h6 class="mb-0 fs-15">Diana Kohler</h6>
|
||||
<p class="mb-0 text-muted">Owners</p>
|
||||
</div>
|
||||
<div class="bookmark-icon">
|
||||
<button type="button" class="btn btn-icon active" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-place-bid-img overflow-hidden rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="img-fluid explore-img">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 8.34k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 701.38 ETH </h5>
|
||||
<h6 class="fs-16 mb-0"><a href="apps-nft-item-details.html" class="text-reset">Long-tailed Macaque</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card explore-box">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
<div class="ms-2 flex-grow-1">
|
||||
<h6 class="mb-0 fs-15">James Price</h6>
|
||||
<p class="mb-0 text-muted">Owners</p>
|
||||
</div>
|
||||
<div class="bookmark-icon">
|
||||
<button type="button" class="btn btn-icon" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-place-bid-img overflow-hidden rounded">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="img-fluid explore-img">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 29.20k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 917.83 ETH </h5>
|
||||
<h6 class="fs-16 mb-0"><a href="apps-nft-item-details.html" class="text-reset">Robotic Body Art</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card explore-box">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
<div class="ms-2 flex-grow-1">
|
||||
<h6 class="mb-0 fs-15">Rickey Teran</h6>
|
||||
<p class="mb-0 text-muted">Creators</p>
|
||||
</div>
|
||||
<div class="bookmark-icon">
|
||||
<button type="button" class="btn btn-icon" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-place-bid-img overflow-hidden rounded">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt="" class="img-fluid explore-img">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 78.34k </p>
|
||||
<h5 class="text-success"><i class="mdi mdi-ethereum"></i> 571.24 ETH </h5>
|
||||
<h6 class="fs-16 mb-0"><a href="apps-nft-item-details.html" class="text-reset">Creative Filtered Portrait</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="d-lg-flex align-items-center mb-4">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="card-title mb-0 fw-semibold fs-16">Recent NFTs Artwork</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mt-4 mt-lg-0">
|
||||
<a href="apps-nft-creators.html" class="btn btn-soft-secondary">View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1">
|
||||
<div class="col">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="bookmark-icon position-absolute top-0 end-0 p-2">
|
||||
<button type="button" class="btn btn-icon active" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
<div class="explore-place-bid-img">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="card-img-top explore-img" />
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 23.63k </p>
|
||||
<h5 class="mb-1 fs-16"><a href="apps-nft-item-details.html" class="text-reset">The Chirstoper</a></h5>
|
||||
<p class="text-muted mb-0">Music</p>
|
||||
</div>
|
||||
<div class="card-footer border-top border-top-dashed">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1 fs-14">
|
||||
<i class="ri-price-tag-3-fill text-warning align-bottom me-1"></i> Highest: <span class="fw-medium">412.30ETH</span>
|
||||
</div>
|
||||
<h5 class="flex-shrink-0 fs-14 text-primary mb-0">394.7 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="bookmark-icon position-absolute top-0 end-0 p-2">
|
||||
<button type="button" class="btn btn-icon active" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
<div class="explore-place-bid-img">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt="" class="card-img-top explore-img" />
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 94.1k </p>
|
||||
<h5 class="mb-1 fs-16"><a href="apps-nft-item-details.html" class="text-reset">Trendy Fashion Portraits</a></h5>
|
||||
<p class="text-muted mb-0">3d Style</p>
|
||||
</div>
|
||||
<div class="card-footer border-top border-top-dashed">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1 fs-14">
|
||||
<i class="ri-price-tag-3-fill text-warning align-bottom me-1"></i> Highest: <span class="fw-medium">674.92 ETH</span>
|
||||
</div>
|
||||
<h5 class="flex-shrink-0 fs-14 text-primary mb-0">563.81 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="bookmark-icon position-absolute top-0 end-0 p-2">
|
||||
<button type="button" class="btn btn-icon active" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
<div class="explore-place-bid-img">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt="" class="card-img-top explore-img" />
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 34.12k </p>
|
||||
<h5 class="mb-1 fs-16"><a href="apps-nft-item-details.html" class="text-reset">Smillevers Crypto</a></h5>
|
||||
<p class="text-muted mb-0">Crypto Card</p>
|
||||
</div>
|
||||
<div class="card-footer border-top border-top-dashed">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1 fs-14">
|
||||
<i class="ri-price-tag-3-fill text-warning align-bottom me-1"></i> Highest: <span class="fw-medium">41.658 ETH</span>
|
||||
</div>
|
||||
<h5 class="flex-shrink-0 fs-14 text-primary mb-0">34.81 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="bookmark-icon position-absolute top-0 end-0 p-2">
|
||||
<button type="button" class="btn btn-icon active" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
<div class="explore-place-bid-img">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-4.gif" alt="" class="card-img-top explore-img" />
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 15.93k </p>
|
||||
<h5 class="mb-1 fs-16"><a href="apps-nft-item-details.html" class="text-reset">Evolved Reality</a></h5>
|
||||
<p class="text-muted mb-0">Video</p>
|
||||
</div>
|
||||
<div class="card-footer border-top border-top-dashed">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1 fs-14">
|
||||
<i class="ri-price-tag-3-fill text-warning align-bottom me-1"></i> Highest: <span class="fw-medium">2.75ETH</span>
|
||||
</div>
|
||||
<h5 class="flex-shrink-0 fs-14 text-primary mb-0">3.167 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card explore-box card-animate">
|
||||
<div class="bookmark-icon position-absolute top-0 end-0 p-2">
|
||||
<button type="button" class="btn btn-icon active" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>
|
||||
</div>
|
||||
<div class="explore-place-bid-img">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="card-img-top explore-img" />
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="place-bid-btn">
|
||||
<a href="#!" class="btn btn-secondary"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> 14.85k </p>
|
||||
<h5 class="mb-1 fs-16"><a href="apps-nft-item-details.html" class="text-reset">Abstract Face Painting</a></h5>
|
||||
<p class="text-muted mb-0">Collectibles</p>
|
||||
</div>
|
||||
<div class="card-footer border-top border-top-dashed">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1 fs-14">
|
||||
<i class="ri-price-tag-3-fill text-warning align-bottom me-1"></i> Highest: <span class="fw-medium">122.34ETH</span>
|
||||
</div>
|
||||
<h5 class="flex-shrink-0 fs-14 text-primary mb-0">97.8 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="d-lg-flex align-items-center mb-4">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="card-title mb-0 fw-semibold fs-16">Popular Creators</h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mt-4 mt-lg-0">
|
||||
<a href="apps-nft-creators.html" class="btn btn-soft-secondary">View All <i class="ri-arrow-right-line align-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt="" class="card-img-top object-cover" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/users/avatar-1.jpg" alt="" class="avatar-md mt-n5 rounded-circle mx-auto d-block object-cover">
|
||||
<h5 class="fs-16 mt-3 mb-1"><a href="#!" class="text-reset">Tonya Noble</a></h5>
|
||||
<p class="text-muted">5048 Products</p>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt="" class="card-img-top object-cover" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt="" class="avatar-md mt-n5 rounded-circle mx-auto d-block object-cover">
|
||||
<h5 class="fs-16 mt-3 mb-1"><a href="#!" class="text-reset">Kevin Dawson</a></h5>
|
||||
<p class="text-muted">649 Products</p>
|
||||
<div>
|
||||
<button class="btn btn-soft-primary btn-sm">Unfollow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt="" class="card-img-top object-cover" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt="" class="avatar-md mt-n5 rounded-circle mx-auto d-block object-cover">
|
||||
<h5 class="fs-16 mt-3 mb-1"><a href="#!" class="text-reset">Herbert Stokes</a></h5>
|
||||
<p class="text-muted">918 Products</p>
|
||||
<div>
|
||||
<button class="btn btn-soft-primary btn-sm">Unfollow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt="" class="card-img-top object-cover" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt="" class="avatar-md mt-n5 rounded-circle mx-auto d-block object-cover">
|
||||
<h5 class="fs-16 mt-3 mb-1"><a href="#!" class="text-reset">Thomas Taylor</a></h5>
|
||||
<p class="text-muted">345 Products</p>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt="" class="card-img-top object-cover" height="120">
|
||||
<div class="card-body text-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt="" class="avatar-md mt-n5 rounded-circle mx-auto d-block object-cover">
|
||||
<h5 class="fs-16 mt-3 mb-1"><a href="#!" class="text-reset">James Price</a></h5>
|
||||
<p class="text-muted">745 Products</p>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,366 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Ranking')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Ranking','NFT Marketplace')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="contactList">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items center">
|
||||
<h5 class="card-title mb-0 flex-grow-1">The top NFTs ranking on Velzon</h5>
|
||||
<p class="text-muted mb-0">Updated: 28 April, 2022 08:05:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row justify-content-between g-3">
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search" placeholder="Search for ...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-2 col-sm-4">
|
||||
<div>
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
name="choices-single-default" id="idStatus">
|
||||
<option value="All Time" selected>All Time</option>
|
||||
<option value="1 Day">1 Day</option>
|
||||
<option value="7 Days">7 Days</option>
|
||||
<option value="15 Days">15 Days</option>
|
||||
<option value="1 Month">1 Month</option>
|
||||
<option value="6 Month">6 Month</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table align-middle table-nowrap table-hover" id="customerTable">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th class="sort" data-sort="ranking" scope="col" style="width: 98px;">Ranking
|
||||
</th>
|
||||
<th class="sort" data-sort="collection" scope="col">Collection</th>
|
||||
<th class="sort" data-sort="volume_price" scope="col">Volume (USD)</th>
|
||||
<th class="sort" data-sort="24h" scope="col">24h%</th>
|
||||
<th class="sort" data-sort="7d" scope="col">7d%</th>
|
||||
<th class="sort" data-sort="item" scope="col">Item</th>
|
||||
<th class="sort" data-sort="floor-price" scope="col">Floor Price</th>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<td class="ranking text-info fw-semibold">
|
||||
#1
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-01.jpg" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Abstract Face
|
||||
Painting</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">7,50,000</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 24h">342.35 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 7d">312.35 ETH</h6>
|
||||
</td>
|
||||
<td class="item">10k</td>
|
||||
<td class="floor-price">33.02</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking text-info fw-semibold">
|
||||
#2
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-1.gif" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Patterns Arts &
|
||||
Culture</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">32,850</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 24h">-42.03 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 7d">20.14 ETH</h6>
|
||||
</td>
|
||||
<td class="item">8k</td>
|
||||
<td class="floor-price">74.69</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking text-info fw-semibold">
|
||||
#3
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-02.jpg" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Creative
|
||||
Filtered Portrait</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">1,36,000</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 24h">170.31 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 7d">-415.21 ETH</h6>
|
||||
</td>
|
||||
<td class="item">15k</td>
|
||||
<td class="floor-price">67.16</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking">
|
||||
#4
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-2.gif" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Long-tailed
|
||||
Macaque</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">3,63,000</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 24h">709.13 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 7d">-645.10 ETH</h6>
|
||||
</td>
|
||||
<td class="item">21k</td>
|
||||
<td class="floor-price">137.09</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking">
|
||||
#5
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Robotic Body
|
||||
Art</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">25,800</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 24h">-347.42 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 7d">-321.17 ETH</h6>
|
||||
</td>
|
||||
<td class="item">17k</td>
|
||||
<td class="floor-price">343.75</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking">
|
||||
#6
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-06.jpg" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Smillevers
|
||||
Crypto</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">37,100</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 24h">1.42 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 7d">0.64 ETH</h6>
|
||||
</td>
|
||||
<td class="item">31k</td>
|
||||
<td class="floor-price">1.87</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking">
|
||||
#7
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-5.gif" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">The
|
||||
Chirstoper</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">1,87,600</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 24h">-31.49 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 7d">26.07 ETH</h6>
|
||||
</td>
|
||||
<td class="item">18k</td>
|
||||
<td class="floor-price">101.12</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking">
|
||||
#8
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/img-3.gif" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Walking On
|
||||
Air</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">4,62,000</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 24h">238.13 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 7d">183.40 ETH</h6>
|
||||
</td>
|
||||
<td class="item">8.3k</td>
|
||||
<td class="floor-price">143.39</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking">
|
||||
#9
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-05.jpg" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">The
|
||||
Chirstoper</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">74,950</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 24h">-31.49 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 7d">-26.07 ETH</h6>
|
||||
</td>
|
||||
<td class="item">7.9k</td>
|
||||
<td class="floor-price">101.12</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking">
|
||||
#10
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-03.jpg" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Walking On
|
||||
Air</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">3,35,750</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 24h">238.13 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 7d">-64.30 ETH</h6>
|
||||
</td>
|
||||
<td class="item">8.3k</td>
|
||||
<td class="floor-price">143.39</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
<tr>
|
||||
<td class="ranking">
|
||||
#11
|
||||
</td>
|
||||
<td class="collection">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/nft/img-04.jpg" alt=""
|
||||
class="avatar-xs rounded-circle object-cover me-2"> <a
|
||||
href="/apps-nft-item-details" class="link-dark">Highstreet IHO
|
||||
Part</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="volume_price">35,750</td>
|
||||
<td>
|
||||
<h6 class="text-success mb-1 24h">23.10 ETH</h6>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-danger mb-1 7d">-64.36 ETH</h6>
|
||||
</td>
|
||||
<td class="item">12.3k</td>
|
||||
<td class="floor-price">367.39</td>
|
||||
</tr>
|
||||
<!--end tr-->
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop"
|
||||
colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ ranking We did not find any
|
||||
ranking for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/apps-nft-ranking.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,127 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Wallet Connect')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Wallet Connect','NFT Marketplace')"></div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-5">
|
||||
<div class="text-center mb-4">
|
||||
<h4>Your current wallet</h4>
|
||||
<p class="text-muted fs-13">WalletConnect is a convenient open source tool that enables a mobile wallet to easily connect to decentralized web applications, and interact with them from your phone.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mb-4">
|
||||
<div class="col-lg-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body py-5 px-4">
|
||||
<img src="/assets/images/nft/wallet/metamask.png" alt="" height="55" class="mb-3 pb-2">
|
||||
<h5>Metamask</h5>
|
||||
<p class="text-muted pb-1">MetaMask is a software cryptocurrency wallet used to interact with the Ethereum blockchain.</p>
|
||||
<a href="#!" class="btn btn-secondary">Change Wallet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-5">
|
||||
<div class="text-center mb-4">
|
||||
<h4>Connect with one of our other available wallet providers.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body py-5 px-4">
|
||||
<img src="/assets/images/nft/wallet/metamask.png" alt="" height="55" class="mb-3 pb-2">
|
||||
<h5>Metamask</h5>
|
||||
<p class="text-muted pb-1">MetaMask is a software cryptocurrency wallet used to interact with the Ethereum blockchain.</p>
|
||||
<a href="#!" class="btn btn-soft-primary">Connect Wallet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body py-5 px-4">
|
||||
<img src="/assets/images/nft/wallet/coinbase.png" alt="" height="55" class="mb-3 pb-2">
|
||||
<h5>Coinbase Wallet</h5>
|
||||
<p class="text-muted pb-1">Coinbase Wallet is a software product that gives you access to a wide spectrum.</p>
|
||||
<a href="#!" class="btn btn-soft-primary">Connect Wallet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body py-5 px-4">
|
||||
<img src="/assets/images/nft/wallet/kukai.png" alt="" height="55" class="mb-3 pb-2">
|
||||
<h5>Kukai Wallet</h5>
|
||||
<p class="text-muted pb-1">Kukai is a seamless browser-based wallet that allows users to store, transfer, and delegate.</p>
|
||||
<a href="#!" class="btn btn-soft-primary">Connect Wallet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body py-5 px-4">
|
||||
<img src="/assets/images/nft/wallet/binance.png" alt="" height="55" class="mb-3 pb-2">
|
||||
<h5>Binance</h5>
|
||||
<p class="text-muted pb-1">Binance offers a relatively secure, versatile way to invest in and trade cryptocurrencies.</p>
|
||||
<a href="#!" class="btn btn-soft-primary">Connect Wallet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body py-5 px-4">
|
||||
<img src="/assets/images/nft/wallet/enjin.png" alt="" height="55" class="mb-3 pb-2">
|
||||
<h5>Enjin Wallet</h5>
|
||||
<p class="text-muted pb-1">Enjin is a store of value that can be used in the non-fungible token (NFT) marketplace.</p>
|
||||
<a href="#!" class="btn btn-soft-primary">Connect Wallet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body py-5 px-4">
|
||||
<img src="/assets/images/nft/wallet/alpha.png" alt="" height="55" class="mb-3 pb-2">
|
||||
<h5>Alpha Wallet</h5>
|
||||
<p class="text-muted pb-1">AlphaWallet uses the TokenScript framework, which makes tokens become “smart”.</p>
|
||||
<a href="#!" class="btn btn-soft-primary">Connect Wallet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="card text-center">
|
||||
<div class="card-body py-5 px-4">
|
||||
<img src="/assets/images/nft/wallet/math.png" alt="" height="55" class="mb-3 pb-2">
|
||||
<h5>Math Wallet</h5>
|
||||
<p class="text-muted pb-1">Math DApp Factory gives users tools that can simplify the development of exchanges, games</p>
|
||||
<a href="#!" class="btn btn-soft-primary">Connect Wallet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,270 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Create Project')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Plugins css -->
|
||||
<link href="/assets/libs/dropzone/dropzone.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Create Project','Projects')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="project-title-input">Project Title</label>
|
||||
<input type="text" class="form-control" id="project-title-input"
|
||||
placeholder="Enter project title">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="project-thumbnail-img">Thumbnail Image</label>
|
||||
<input class="form-control" id="project-thumbnail-img" type="file"
|
||||
accept="image/png, image/gif, image/jpeg">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Project Description</label>
|
||||
<div id="ckeditor-classic">
|
||||
<p>It will be as simple as occidental in fact, it will be Occidental. To an English
|
||||
person, it will seem like simplified English, as a skeptical Cambridge friend of
|
||||
mine told me what Occidental is. The European languages are members of the same
|
||||
family. Their separate existence is a myth. For science, music, sport, etc, Europe
|
||||
uses the same vocabulary.</p>
|
||||
<ul>
|
||||
<li>Product Design, Figma (Software), Prototype</li>
|
||||
<li>Four Dashboards : Ecommerce, Analytics, Project etc.</li>
|
||||
<li>Create calendar, chat and email app pages.</li>
|
||||
<li>Add authentication pages</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3 mb-lg-0">
|
||||
<label for="choices-priority-input" class="form-label">Priority</label>
|
||||
<select class="form-select" data-choices data-choices-search-false
|
||||
id="choices-priority-input">
|
||||
<option value="High" selected>High</option>
|
||||
<option value="Medium">Medium</option>
|
||||
<option value="Low">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3 mb-lg-0">
|
||||
<label for="choices-status-input" class="form-label">Status</label>
|
||||
<select class="form-select" data-choices data-choices-search-false
|
||||
id="choices-status-input">
|
||||
<option value="Inprogress" selected>Inprogress</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<label for="datepicker-deadline-input" class="form-label">Deadline</label>
|
||||
<input type="text" class="form-control" id="datepicker-deadline-input"
|
||||
placeholder="Enter due date" data-provider="flatpickr">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Attached files</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<p class="text-muted">Add Attached files here.</p>
|
||||
|
||||
<div class="dropzone">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" multiple="multiple">
|
||||
</div>
|
||||
<div class="dz-message needsclick">
|
||||
<div class="mb-3">
|
||||
<i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
|
||||
</div>
|
||||
|
||||
<h5>Drop files here or click to upload.</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled mb-0" id="dropzone-preview">
|
||||
<li class="mt-2" id="dropzone-preview-list">
|
||||
<!-- This is used as the file preview template -->
|
||||
<div class="border rounded">
|
||||
<div class="d-flex p-2">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm bg-light rounded">
|
||||
<img src="#" alt="Project-Image" data-dz-thumbnail
|
||||
class="img-fluid rounded d-block" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="pt-1">
|
||||
<h5 class="fs-14 mb-1" data-dz-name> </h5>
|
||||
<p class="fs-13 text-muted mb-0" data-dz-size></p>
|
||||
<strong class="error text-danger" data-dz-errormessage></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-3">
|
||||
<button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end dropzon-preview -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
<div class="text-end mb-4">
|
||||
<button type="submit" class="btn btn-danger w-sm">Delete</button>
|
||||
<button type="submit" class="btn btn-secondary w-sm">Draft</button>
|
||||
<button type="submit" class="btn btn-success w-sm">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Privacy</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<label for="choices-privacy-status-input" class="form-label">Status</label>
|
||||
<select class="form-select" data-choices data-choices-search-false
|
||||
id="choices-privacy-status-input">
|
||||
<option value="Private" selected>Private</option>
|
||||
<option value="Team">Team</option>
|
||||
<option value="Public">Public</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Tags</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="choices-categories-input" class="form-label">Categories</label>
|
||||
<select class="form-select" data-choices data-choices-search-false
|
||||
id="choices-categories-input">
|
||||
<option value="Designing" selected>Designing</option>
|
||||
<option value="Development">Development</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="choices-text-input" class="form-label">Skills</label>
|
||||
<input class="form-control" id="choices-text-input" data-choices
|
||||
data-choices-limit="Required Limit" placeholder="Enter Skills" type="text"
|
||||
value="UI/UX, Figma, HTML, CSS, Javascript, C#, Nodejs" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Members</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="choices-lead-input" class="form-label">Team Lead</label>
|
||||
<select class="form-select" data-choices data-choices-search-false id="choices-lead-input">
|
||||
<option value="Brent Gonzalez" selected>Brent Gonzalez</option>
|
||||
<option value="Darline Williams">Darline Williams</option>
|
||||
<option value="Sylvia Wright">Sylvia Wright</option>
|
||||
<option value="Ellen Smith">Ellen Smith</option>
|
||||
<option value="Jeffrey Salazar">Jeffrey Salazar</option>
|
||||
<option value="Mark Williams">Mark Williams</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Team Members</label>
|
||||
<div class="avatar-group">
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover" data-bs-placement="top" title="Brent Gonzalez">
|
||||
<div class="avatar-xs">
|
||||
<img src="assets/images/users/avatar-3.jpg" alt=""
|
||||
class="rounded-circle img-fluid">
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover" data-bs-placement="top" title="Sylvia Wright">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title rounded-circle bg-secondary">
|
||||
S
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover" data-bs-placement="top" title="Ellen Smith">
|
||||
<div class="avatar-xs">
|
||||
<img src="assets/images/users/avatar-4.jpg" alt=""
|
||||
class="rounded-circle img-fluid">
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover" data-bs-placement="top" title="Add Members">
|
||||
<div class="avatar-xs" data-bs-toggle="modal" data-bs-target="#inviteMembersModal">
|
||||
<div
|
||||
class="avatar-title fs-16 rounded-circle bg-light border-dashed border text-primary">
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- ckeditor -->
|
||||
<script src="/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
|
||||
|
||||
<!-- dropzone js -->
|
||||
<script src="/assets/libs/dropzone/dropzone-min.js"></script>
|
||||
<!-- project-create init -->
|
||||
<script src="/assets/js/pages/project-create.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,771 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Task Details')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Task Details','Tasks')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title mb-3 flex-grow-1 text-start">Time Tracking</h6>
|
||||
<div class="mb-2">
|
||||
<lord-icon src="https://cdn.lordicon.com/kbtmbyzy.json" trigger="loop" colors="primary:#687cfe,secondary:#ff7f5d" style="width:90px;height:90px"></lord-icon>
|
||||
</div>
|
||||
<h3 class="mb-1">9 hrs 13 min</h3>
|
||||
<h5 class="fs-14 mb-4">Profile Page Satructure</h5>
|
||||
<div class="hstack gap-2 justify-content-center">
|
||||
<button class="btn btn-danger btn-sm"><i class="ri-stop-circle-line align-bottom me-1"></i> Stop</button>
|
||||
<button class="btn btn-primary btn-sm"><i class="ri-play-circle-line align-bottom me-1"></i> Start</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="mb-4">
|
||||
<select class="form-control" name="choices-single-default" data-choices data-choices-search-false>
|
||||
<option value="">Select Task board</option>
|
||||
<option value="Unassigned">Unassigned</option>
|
||||
<option value="To Do">To Do</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="In Reviews" selected>In Reviews</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<table class="table mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium">Tasks No</td>
|
||||
<td>#VLZ456</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Tasks Title</td>
|
||||
<td>Profile Page Satructure</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Project Name</td>
|
||||
<td>Velzon - Admin Dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Priority</td>
|
||||
<td><span class="badge badge-soft-danger">High</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Status</td>
|
||||
<td><span class="badge badge-soft-secondary">Inprogress</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Due Date</td>
|
||||
<td>05 Jan, 2022</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<h6 class="card-title mb-0 flex-grow-1">Assigned To</h6>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button" class="btn btn-soft-danger btn-sm" data-bs-toggle="modal" data-bs-target="#inviteMembersModal"><i class="ri-share-line me-1 align-bottom"></i> Assigned Member</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled vstack gap-3 mb-0">
|
||||
<li>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-xs rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="mb-1"><a href="/pages-profile" class="text-reset">Tonya Noble</a></h6>
|
||||
<p class="text-muted mb-0">Full Stack Developer</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon btn-sm fs-16 text-muted dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-eye-fill text-muted me-2 align-bottom"></i>View</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-star-fill text-muted me-2 align-bottom"></i>Favourite</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-5-fill text-muted me-2 align-bottom"></i>Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="avatar-xs rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="mb-1"><a href="/pages-profile" class="text-reset">Thomas Taylor</a></h6>
|
||||
<p class="text-muted mb-0">UI/UX Designer</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon btn-sm fs-16 text-muted dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-eye-fill text-muted me-2 align-bottom"></i>View</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-star-fill text-muted me-2 align-bottom"></i>Favourite</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-5-fill text-muted me-2 align-bottom"></i>Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="avatar-xs rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<h6 class="mb-1"><a href="/pages-profile" class="text-reset">Nancy Martino</a></h6>
|
||||
<p class="text-muted mb-0">Web Designer</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon btn-sm fs-16 text-muted dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-eye-fill text-muted me-2 align-bottom"></i>View</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-star-fill text-muted me-2 align-bottom"></i>Favourite</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-5-fill text-muted me-2 align-bottom"></i>Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3">Attachments</h5>
|
||||
<div class="vstack gap-2">
|
||||
<div class="border rounded border-dashed p-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm">
|
||||
<div class="avatar-title bg-light text-secondary rounded fs-24">
|
||||
<i class="ri-folder-zip-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-13 mb-1"><a href="javascript:void(0);" class="text-body text-truncate d-block">App pages.zip</a></h5>
|
||||
<div>2.2MB</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="d-flex gap-1">
|
||||
<button type="button" class="btn btn-icon text-muted btn-sm fs-18"><i class="ri-download-2-line"></i></button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon text-muted btn-sm fs-18 dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Rename</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded border-dashed p-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm">
|
||||
<div class="avatar-title bg-light text-secondary rounded fs-24">
|
||||
<i class="ri-file-ppt-2-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-13 mb-1"><a href="javascript:void(0);" class="text-body text-truncate d-block">Velzon admin.ppt</a></h5>
|
||||
<div>2.4MB</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="d-flex gap-1">
|
||||
<button type="button" class="btn btn-icon text-muted btn-sm fs-18"><i class="ri-download-2-line"></i></button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon text-muted btn-sm fs-18 dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Rename</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded border-dashed p-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm">
|
||||
<div class="avatar-title bg-light text-secondary rounded fs-24">
|
||||
<i class="ri-folder-zip-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-13 mb-1"><a href="javascript:void(0);" class="text-body text-truncate d-block">Images.zip</a></h5>
|
||||
<div>1.2MB</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="d-flex gap-1">
|
||||
<button type="button" class="btn btn-icon text-muted btn-sm fs-18"><i class="ri-download-2-line"></i></button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon text-muted btn-sm fs-18 dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Rename</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-center">
|
||||
<button type="button" class="btn btn-primary">View more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!---end col-->
|
||||
<div class="col-xxl-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="text-muted">
|
||||
<h6 class="mb-3 fw-semibold text-uppercase">Summary</h6>
|
||||
<p>It will be as simple as occidental in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.</p>
|
||||
|
||||
<h6 class="mb-3 fw-semibold text-uppercase">Sub-tasks</h6>
|
||||
<ul class="ps-3 list-unstyled vstack gap-2">
|
||||
<li>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="productTask">
|
||||
<label class="form-check-label" for="productTask">
|
||||
Product Design, Figma (Software), Prototype
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="dashboardTask" checked>
|
||||
<label class="form-check-label" for="dashboardTask">
|
||||
Dashboards : Ecommerce, Analytics, Project,etc.
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="calenderTask">
|
||||
<label class="form-check-label" for="calenderTask">
|
||||
Create calendar, chat and email app pages
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="authenticationTask">
|
||||
<label class="form-check-label" for="authenticationTask">
|
||||
Add authentication pages
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="pt-3 border-top border-top-dashed mt-4">
|
||||
<h6 class="mb-3 fw-semibold text-uppercase">Tasks Tags</h6>
|
||||
<div class="hstack flex-wrap gap-2 fs-15">
|
||||
<div class="badge fw-medium badge-soft-info">UI/UX</div>
|
||||
<div class="badge fw-medium badge-soft-info">Dashboard</div>
|
||||
<div class="badge fw-medium badge-soft-info">Design</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#home-1" role="tab">
|
||||
Comments (5)
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#messages-1" role="tab">
|
||||
Attachments File (4)
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#profile-1" role="tab">
|
||||
Time Entries (9 hrs 13 min)
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--end nav-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="home-1" role="tabpanel">
|
||||
<h5 class="card-title mb-4">Comments</h5>
|
||||
<div data-simplebar style="height: 508px;" class="px-3 mx-n3 mb-2">
|
||||
<div class="d-flex mb-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-7.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-14"><a href="/pages-profile" class="text-reset">Joseph Parker</a> <small class="text-muted">20 Dec 2021 - 05:47AM</small></h5>
|
||||
<p class="text-muted">I am getting message from customers that when they place order always get error message .</p>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i class="mdi mdi-reply"></i> Reply</a>
|
||||
<div class="d-flex mt-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-14"><a href="/pages-profile" class="text-reset">Tonya Noble</a> <small class="text-muted">22 Dec 2021 - 02:32PM</small></h5>
|
||||
<p class="text-muted">Please be sure to check your Spam mailbox to see if your email filters have identified the email from Dell as spam.</p>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i class="mdi mdi-reply"></i> Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-14"><a href="/pages-profile" class="text-reset">Thomas Taylor</a> <small class="text-muted">24 Dec 2021 - 05:20PM</small></h5>
|
||||
<p class="text-muted">If you have further questions, please contact Customer Support from the “Action Menu” on your <a href="javascript:void(0);" class="text-decoration-underline">Online Order Support</a>.</p>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i class="mdi mdi-reply"></i> Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-14"><a href="/pages-profile" class="text-reset">Tonya Noble</a> <small class="text-muted">26 min ago</small></h5>
|
||||
<p class="text-muted">Your <a href="javascript:void(0)" class="text-decoration-underline">Online Order Support</a> provides you with the most current status of your order. To help manage your order refer to the “Action Menu” to initiate return, contact Customer Support and more.</p>
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-lg-1 col-sm-2 col-6">
|
||||
<img src="/assets/images/small/img-4.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<div class="col-lg-1 col-sm-2 col-6">
|
||||
<img src="/assets/images/small/img-5.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i class="mdi mdi-reply"></i> Reply</a>
|
||||
<div class="d-flex mt-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-6.jpg" alt="" class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-14"><a href="/pages-profile" class="text-reset">Nancy Martino</a> <small class="text-muted">8 sec ago</small></h5>
|
||||
<p class="text-muted">Other shipping methods are available at checkout if you want your purchase delivered faster.</p>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i class="mdi mdi-reply"></i> Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="mt-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<label for="exampleFormControlTextarea1" class="form-label">Leave a Comments</label>
|
||||
<textarea class="form-control bg-light border-light" id="exampleFormControlTextarea1" rows="3" placeholder="Enter comments"></textarea>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-12 text-end">
|
||||
<button type="button" class="btn btn-ghost-secondary btn-icon waves-effect me-1"><i class="ri-attachment-line fs-16"></i></button>
|
||||
<a href="javascript:void(0);" class="btn btn-primary">Post Comments</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<!--end tab-pane-->
|
||||
<div class="tab-pane" id="messages-1" role="tabpanel">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless align-middle mb-0">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th scope="col">File Name</th>
|
||||
<th scope="col">Type</th>
|
||||
<th scope="col">Size</th>
|
||||
<th scope="col">Upload Date</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm">
|
||||
<div class="avatar-title bg-soft-primary text-primary rounded fs-20">
|
||||
<i class="ri-file-zip-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<h6 class="fs-15 mb-0"><a href="javascript:void(0)">App pages.zip</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Zip File</td>
|
||||
<td>2.22 MB</td>
|
||||
<td>21 Dec, 2021</td>
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<a href="javascript:void(0);" class="btn btn-light btn-icon" id="dropdownMenuLink1" data-bs-toggle="dropdown" aria-expanded="true">
|
||||
<i class="ri-equalizer-fill"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink1" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 23px);">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-eye-fill me-2 align-middle text-muted"></i>View</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-download-2-fill me-2 align-middle text-muted"></i>Download</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-5-line me-2 align-middle text-muted"></i>Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm">
|
||||
<div class="avatar-title bg-soft-danger text-danger rounded fs-20">
|
||||
<i class="ri-file-pdf-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<h6 class="fs-15 mb-0"><a href="javascript:void(0);">Velzon admin.ppt</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>PPT File</td>
|
||||
<td>2.24 MB</td>
|
||||
<td>25 Dec, 2021</td>
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<a href="javascript:void(0);" class="btn btn-light btn-icon" id="dropdownMenuLink2" data-bs-toggle="dropdown" aria-expanded="true">
|
||||
<i class="ri-equalizer-fill"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink2" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 23px);">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-eye-fill me-2 align-middle text-muted"></i>View</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-download-2-fill me-2 align-middle text-muted"></i>Download</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-5-line me-2 align-middle text-muted"></i>Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm">
|
||||
<div class="avatar-title bg-soft-info text-info rounded fs-20">
|
||||
<i class="ri-folder-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<h6 class="fs-15 mb-0"><a href="javascript:void(0);">Images.zip</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>ZIP File</td>
|
||||
<td>1.02 MB</td>
|
||||
<td>28 Dec, 2021</td>
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<a href="javascript:void(0);" class="btn btn-light btn-icon" id="dropdownMenuLink3" data-bs-toggle="dropdown" aria-expanded="true">
|
||||
<i class="ri-equalizer-fill"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink3" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 23px);">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-eye-fill me-2 align-middle"></i>View</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-download-2-fill me-2 align-middle"></i>Download</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm">
|
||||
<div class="avatar-title bg-soft-danger text-danger rounded fs-20">
|
||||
<i class="ri-image-2-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1">
|
||||
<h6 class="fs-15 mb-0"><a href="javascript:void(0);">Bg-pattern.png</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>PNG File</td>
|
||||
<td>879 KB</td>
|
||||
<td>02 Nov 2021</td>
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<a href="javascript:void(0);" class="btn btn-light btn-icon" id="dropdownMenuLink4" data-bs-toggle="dropdown" aria-expanded="true">
|
||||
<i class="ri-equalizer-fill"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink4" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 23px);">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-eye-fill me-2 align-middle"></i>View</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-download-2-fill me-2 align-middle"></i>Download</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</div>
|
||||
</div>
|
||||
<!--end tab-pane-->
|
||||
<div class="tab-pane" id="profile-1" role="tabpanel">
|
||||
<h6 class="card-title mb-4 pb-2">Time Entries</h6>
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th scope="col">Member</th>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Duration</th>
|
||||
<th scope="col">Timer Idle</th>
|
||||
<th scope="col">Tasks Title</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xxs">
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<a href="/pages-profile" class="fw-medium text-reset">Thomas Taylor</a>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>02 Jan, 2022</td>
|
||||
<td>3 hrs 12 min</td>
|
||||
<td>05 min</td>
|
||||
<td>Apps Pages</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xxs">
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<a href="/pages-profile" class="fw-medium text-reset">Tonya Noble</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>28 Dec, 2021</td>
|
||||
<td>1 hrs 35 min</td>
|
||||
<td>-</td>
|
||||
<td>Profile Page Design</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xxs">
|
||||
<div class="flex-grow-1 ms-2">
|
||||
<a href="/pages-profile" class="fw-medium text-reset">Tonya Noble</a>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>27 Dec, 2021</td>
|
||||
<td>4 hrs 26 min</td>
|
||||
<td>03 min</td>
|
||||
<td>Ecommerce Dashboard</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
</div>
|
||||
</div>
|
||||
<!--edn tab-pane-->
|
||||
|
||||
</div>
|
||||
<!--end tab-content-->
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="modal fade" id="inviteMembersModal" tabindex="-1" aria-labelledby="inviteMembersModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header p-3 ps-4 bg-soft-success">
|
||||
<h5 class="modal-title" id="inviteMembersModalLabel">Team Members</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4">
|
||||
<div class="search-box mb-3">
|
||||
<input type="text" class="form-control bg-light border-light" placeholder="Search here...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 d-flex align-items-center">
|
||||
<div class="me-2">
|
||||
<h5 class="mb-0 fs-13">Members :</h5>
|
||||
</div>
|
||||
<div class="avatar-group justify-content-center">
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Tonya Noble">
|
||||
<div class="avatar-xs">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="rounded-circle img-fluid">
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Thomas Taylor">
|
||||
<div class="avatar-xs">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="rounded-circle img-fluid">
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Nancy Martino">
|
||||
<div class="avatar-xs">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="rounded-circle img-fluid">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n4 px-4" data-simplebar style="max-height: 225px;">
|
||||
<div class="vstack gap-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0"><a href="javascript:void(0);" class="text-body d-block">Nancy Martino</a></h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button" class="btn btn-light btn-sm">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end member item -->
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<div class="avatar-title bg-soft-danger text-danger rounded-circle">
|
||||
HB
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0"><a href="javascript:void(0);" class="text-body d-block">Henry Baird</a></h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button" class="btn btn-light btn-sm">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end member item -->
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt="" class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0"><a href="javascript:void(0);" class="text-body d-block">Frank Hook</a></h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button" class="btn btn-light btn-sm">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end member item -->
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-4.jpg" alt="" class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0"><a href="javascript:void(0);" class="text-body d-block">Jennifer Carter</a></h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button" class="btn btn-light btn-sm">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end member item -->
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<div class="avatar-title bg-soft-success text-success rounded-circle">
|
||||
AC
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0"><a href="javascript:void(0);" class="text-body d-block">Alexis Clarke</a></h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button" class="btn btn-light btn-sm">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end member item -->
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs flex-shrink-0 me-3">
|
||||
<img src="/assets/images/users/avatar-7.jpg" alt="" class="img-fluid rounded-circle">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="fs-13 mb-0"><a href="javascript:void(0);" class="text-body d-block">Joseph Parker</a></h5>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button" class="btn btn-light btn-sm">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end member item -->
|
||||
</div>
|
||||
<!-- end list -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light w-xs" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success w-xs">Assigned</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end modal-content -->
|
||||
</div>
|
||||
<!-- modal-dialog -->
|
||||
</div>
|
||||
<!-- end modal -->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,491 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Tasks List')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Tasks List','Tasks')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Total Tasks</p>
|
||||
<h4 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="234">0</span>k</h4>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 17.32 %</span> vs. previous month
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-info text-info rounded-circle fs-4">
|
||||
<i class="ri-ticket-2-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div> <!-- end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Pending Tasks</p>
|
||||
<h4 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="64.5">0</span>k</h4>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-danger mb-0"> <i class="ri-arrow-down-line align-middle"></i> 0.87 %</span> vs. previous
|
||||
month</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-warning text-warning rounded-circle fs-4">
|
||||
<i class="mdi mdi-timer-sand"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Completed Tasks</p>
|
||||
<h4 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="116.21">0</span>K</h4>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-danger mb-0"> <i class="ri-arrow-down-line align-middle"></i> 2.52 % </span> vs. previous
|
||||
month</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-success text-success rounded-circle fs-4">
|
||||
<i class="ri-checkbox-circle-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Deleted Tasks</p>
|
||||
<h4 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="14.84">0</span>%</h4>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 0.63 % </span> vs. previous month
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-danger text-danger rounded-circle fs-4">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="tasksList">
|
||||
<div class="card-header border-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<h5 class="card-title mb-0 flex-grow-1">All Tasks</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<button class="btn btn-secondary add-btn" data-bs-toggle="modal" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Create
|
||||
Task</button>
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body border border-dashed border-end-0 border-start-0">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-xxl-5 col-sm-12">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search bg-light border-light" placeholder="Search for tasks or something...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-3 col-sm-4">
|
||||
<input type="text" class="form-control bg-light border-light" id="demo-datepicker" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" placeholder="Select date range">
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-3 col-sm-4">
|
||||
<div class="input-light">
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
|
||||
<option value="">Status</option>
|
||||
<option value="all" selected>All</option>
|
||||
<option value="New">New</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-1 col-sm-4">
|
||||
<button type="button" class="btn btn-primary w-100" onclick="SearchData();"> <i class="ri-equalizer-fill me-1 align-bottom"></i>
|
||||
Filters
|
||||
</button>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card mb-4">
|
||||
<table class="table align-middle table-nowrap mb-0" id="tasksTable">
|
||||
<thead class="table-light text-muted">
|
||||
<tr>
|
||||
<th scope="col" style="width: 40px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort" data-sort="id">ID</th>
|
||||
<th class="sort" data-sort="project_name">Project</th>
|
||||
<th class="sort" data-sort="tasks_name">Task</th>
|
||||
<th class="sort" data-sort="client_name">Client Name</th>
|
||||
<th class="sort" data-sort="assignedto">Assigned To</th>
|
||||
<th class="sort" data-sort="due_date">Due Date</th>
|
||||
<th class="sort" data-sort="status">Status</th>
|
||||
<th class="sort" data-sort="priority">Priority</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="chk_child" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id"><a href="/apps-tasks-details" class="fw-medium link-primary">#VLZ501</a></td>
|
||||
<td class="project_name"><a href="apps-projects-overview.html" class="fw-medium link-primary">Velzon - v1.0.0</a></td>
|
||||
<td>
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1 tasks_name">Profile Page Satructure</div>
|
||||
<div class="flex-shrink-0 ms-4">
|
||||
<ul class="list-inline tasks-list-menu mb-0">
|
||||
<li class="list-inline-item"><a href="/apps-tasks-details"><i class="ri-eye-fill align-bottom me-2 text-muted"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item"><a class="edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i></a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a class="remove-item-btn" data-bs-toggle="modal" href="#deleteOrder">
|
||||
<i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="client_name">Robert McMahon</td>
|
||||
<td class="assignedto">
|
||||
<div class="avatar-group">
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Frank">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-xxs" />
|
||||
</a>
|
||||
<a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Anna">
|
||||
<img src="/assets/images/users/avatar-1.jpg" alt="" class="rounded-circle avatar-xxs" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="due_date">25 Jan, 2022</td>
|
||||
<td class="status"><span class="badge badge-soft-secondary text-uppercase">Inprogress</span></td>
|
||||
<td class="priority"><span class="badge bg-danger text-uppercase">High</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--end table-->
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 200k+ tasks We did not find any
|
||||
tasks for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-2">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body p-5 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
|
||||
<div class="mt-4 text-center">
|
||||
<h4>You are about to delete a task ?</h4>
|
||||
<p class="text-muted fs-14 mb-4">Deleting your task will remove all of
|
||||
your information from our database.</p>
|
||||
<div class="hstack gap-2 justify-content-center remove">
|
||||
<button class="btn btn-link btn-ghost-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button class="btn btn-danger" id="delete-record">Yes, Delete It</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end delete modal -->
|
||||
|
||||
<div class="modal fade zoomIn" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header p-3 bg-soft-info">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Create Task</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<form class="tablelist-form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="tasksId" />
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<label for="projectName-field" class="form-label">Project Name</label>
|
||||
<input type="text" id="projectName-field" class="form-control" placeholder="Project name" required />
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="tasksTitle-field" class="form-label">Title</label>
|
||||
<input type="text" id="tasksTitle-field" class="form-control" placeholder="Title" required />
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<label for="clientName-field" class="form-label">Client Name</label>
|
||||
<input type="text" id="clientName-field" class="form-control" placeholder="Client name" required />
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<label class="form-label">Assigned To</label>
|
||||
<div data-simplebar style="height: 95px;">
|
||||
<ul class="list-unstyled vstack gap-2 mb-0">
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-2.jpg" id="james-forbes">
|
||||
<label class="form-check-label d-flex align-items-center" for="james-forbes">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">James Forbes</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-3.jpg" id="john-robles">
|
||||
<label class="form-check-label d-flex align-items-center" for="john-robles">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">John Robles</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-4.jpg" id="mary-gant">
|
||||
<label class="form-check-label d-flex align-items-center" for="mary-gant">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-4.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">Mary Gant</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-1.jpg" id="curtis-saenz">
|
||||
<label class="form-check-label d-flex align-items-center" for="curtis-saenz">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-1.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">Curtis Saenz</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-5.jpg" id="virgie-price">
|
||||
<label class="form-check-label d-flex align-items-center" for="virgie-price">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-5.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">Virgie Price</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-10.jpg" id="anthony-mills">
|
||||
<label class="form-check-label d-flex align-items-center" for="anthony-mills">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">Anthony Mills</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-6.jpg" id="marian-angel">
|
||||
<label class="form-check-label d-flex align-items-center" for="marian-angel">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-6.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">Marian Angel</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-10.jpg" id="johnnie-walton">
|
||||
<label class="form-check-label d-flex align-items-center" for="johnnie-walton">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-7.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">Johnnie Walton</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-8.jpg" id="donna-weston">
|
||||
<label class="form-check-label d-flex align-items-center" for="donna-weston">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">Donna Weston</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="form-check d-flex align-items-center">
|
||||
<input class="form-check-input me-3" type="checkbox" name="assignedTo[]" value="avatar-9.jpg" id="diego-norris">
|
||||
<label class="form-check-label d-flex align-items-center" for="diego-norris">
|
||||
<span class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-9.jpg" alt="" class="avatar-xxs rounded-circle">
|
||||
</span>
|
||||
<span class="flex-grow-1 ms-2">Diego Norris</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<label for="duedate-field" class="form-label">Due Date</label>
|
||||
<input type="text" id="duedate-field" class="form-control" data-provider="flatpickr" placeholder="Due date" required />
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<label for="ticket-status" class="form-label">Status</label>
|
||||
<select class="form-control" data-choices data-choices-search-false id="ticket-status">
|
||||
<option value="">Status</option>
|
||||
<option value="New">New</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-12">
|
||||
<label for="priority-field" class="form-label">Priority</label>
|
||||
<select class="form-control" data-choices data-choices-search-false id="priority-field">
|
||||
<option value="">Priority</option>
|
||||
<option value="High">High</option>
|
||||
<option value="Medium">Medium</option>
|
||||
<option value="Low">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" id="close-modal" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-success" id="add-btn">Add Task</button>
|
||||
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update Task</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
|
||||
<!--list pagination js-->
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<!-- titcket init js -->
|
||||
<script src="/assets/js/pages/tasks-list.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,396 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Ticket Details')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card mt-n4 mb-n5">
|
||||
<div class="bg-soft-primary">
|
||||
<div class="card-body pb-4 mb-5">
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-auto">
|
||||
<div class="avatar-md mb-md-0 mb-4">
|
||||
<div class="avatar-title bg-white rounded-circle">
|
||||
<img src="/assets/images/companies/img-4.png" alt=""
|
||||
class="avatar-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-md">
|
||||
<h4 class="fw-semibold" id="ticket-title">#VLZ135 - Create an Excellent UI
|
||||
for a Dashboard</h4>
|
||||
<div class="hstack gap-3 flex-wrap">
|
||||
<div class="text-muted"><i
|
||||
class="ri-building-line align-bottom me-1"></i><span
|
||||
id="ticket-client">Themesbrand</span></div>
|
||||
<div class="vr"></div>
|
||||
<div class="text-muted">Create Date : <span class="fw-medium "
|
||||
id="create-date">20 Dec, 2021</span></div>
|
||||
<div class="vr"></div>
|
||||
<div class="text-muted">Due Date : <span class="fw-medium"
|
||||
id="due-date">29 Dec, 2021</span></div>
|
||||
<div class="vr"></div>
|
||||
<div class="badge rounded-pill bg-info fs-12" id="ticket-status">New
|
||||
</div>
|
||||
<div class="badge rounded-pill bg-danger fs-12" id="ticket-priority">
|
||||
High</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-md-auto mt-md-0 mt-4">
|
||||
<div class="hstack gap-1 flex-wrap">
|
||||
<button type="button" class="btn avatar-xs mt-n1 p-0 favourite-btn active">
|
||||
<span class="avatar-title bg-transparent fs-15">
|
||||
<i class="ri-star-fill"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" class="btn py-0 fs-16 text-body" id="settingDropdown"
|
||||
data-bs-toggle="dropdown">
|
||||
<i class="ri-share-line"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="settingDropdown">
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-share-forward-fill align-bottom me-2 text-muted"></i>
|
||||
Share with</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-delete-bin-fill align-bottom me-2 text-muted"></i>
|
||||
Delete</a></li>
|
||||
</ul>
|
||||
<button type="button" class="btn py-0 fs-16 text-body">
|
||||
<i class="ri-flag-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div><!-- end card -->
|
||||
</div><!-- end col -->
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-9">
|
||||
<div class="card">
|
||||
<div class="card-body p-4">
|
||||
<h6 class="fw-semibold text-uppercase mb-3">Ticket Discripation</h6>
|
||||
<p class="text-muted">It would also help to know what the errors are - it could be something
|
||||
simple like a message saying delivery is not available which could be a problem with your
|
||||
shipping templates. Too much or too little spacing, as in the example below, can make things
|
||||
unpleasant for the reader. The goal is to make your text as comfortable to read as possible.
|
||||
On the note of consistency, color consistency is a MUST. If you’re not trying to create
|
||||
crazy contrast in your design, then a great idea would be for you to use a color palette
|
||||
throughout your entire design. It will subconsciously interest viewers and also is very
|
||||
pleasing to look at. <a href="javascript:void(0);"
|
||||
class="link-secondary text-decoration-underline">Example</a></p>
|
||||
<h6 class="fw-semibold text-uppercase mb-3">Create an Excellent UI for a Dashboard</h6>
|
||||
<ul class="text-muted vstack gap-2 mb-4">
|
||||
<li>Pick a Dashboard Type</li>
|
||||
<li>Categorize information when needed</li>
|
||||
<li>Provide Context</li>
|
||||
<li>On using colors</li>
|
||||
<li>On using the right graphs</li>
|
||||
</ul>
|
||||
<div class="mt-4">
|
||||
<h6 class="fw-semibold text-uppercase mb-3">Here is the code you've requsted</h6>
|
||||
<div>
|
||||
<pre class="language-markup rounded-2"><code>var app = document.getElementById("app");
|
||||
var run = (model) => get(model, "users", () =>
|
||||
get(model, "posts",
|
||||
() => {
|
||||
model.users.forEach(user => model.userIdx[user.id] = user);
|
||||
app.innerText = '';
|
||||
model.posts.forEach(post =>
|
||||
app.appendChild(renderPost(post, model.userIdx[post.userId])));
|
||||
}));
|
||||
app.appendChild(Wrapper.generate("button", "Load").click(() => run({
|
||||
userIdx: {}
|
||||
})).element);</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title mb-4">Comments</h5>
|
||||
|
||||
<div data-simplebar style="height: 300px;" class="px-3 mx-n3">
|
||||
<div class="d-flex mb-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt=""
|
||||
class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-13">Joseph Parker <small class="text-muted">20 Dec 2021 -
|
||||
05:47AM</small></h5>
|
||||
<p class="text-muted">I am getting message from customers that when they place order
|
||||
always get error message .</p>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i
|
||||
class="mdi mdi-reply"></i> Reply</a>
|
||||
<div class="d-flex mt-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt=""
|
||||
class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-13">Alexis Clarke <small class="text-muted">22 Dec 2021 -
|
||||
02:32PM</small></h5>
|
||||
<p class="text-muted">Please be sure to check your Spam mailbox to see if
|
||||
your email filters have identified the email from Dell as spam.</p>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i
|
||||
class="mdi mdi-reply"></i> Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-6.jpg" alt=""
|
||||
class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-13">Donald Palmer <small class="text-muted">24 Dec 2021 -
|
||||
05:20PM</small></h5>
|
||||
<p class="text-muted">If you have further questions, please contact Customer Support
|
||||
from the “Action Menu” on your <a href="javascript:void(0);"
|
||||
class="text-decoration-underline">Online Order Support</a>.</p>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i
|
||||
class="mdi mdi-reply"></i> Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt=""
|
||||
class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-13">Alexis Clarke <small class="text-muted">26 min ago</small></h5>
|
||||
<p class="text-muted">Your <a href="javascript:void(0)"
|
||||
class="text-decoration-underline">Online Order Support</a> provides you with
|
||||
the most current status of your order. To help manage your order refer to the
|
||||
“Action Menu” to initiate return, contact Customer Support and more.</p>
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-lg-1 col-sm-2 col-6">
|
||||
<img src="/assets/images/small/img-4.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
<div class="col-lg-1 col-sm-2 col-6">
|
||||
<img src="/assets/images/small/img-5.jpg" alt="" class="img-fluid rounded">
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i
|
||||
class="mdi mdi-reply"></i> Reply</a>
|
||||
<div class="d-flex mt-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/assets/images/users/avatar-6.jpg" alt=""
|
||||
class="avatar-xs rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5 class="fs-13">Donald Palmer <small class="text-muted">8 sec ago</small>
|
||||
</h5>
|
||||
<p class="text-muted">Other shipping methods are available at checkout if
|
||||
you want your purchase delivered faster.</p>
|
||||
<a href="javascript: void(0);" class="badge text-muted bg-light"><i
|
||||
class="mdi mdi-reply"></i> Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form action="javascript:void(0);" class="mt-3">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<label for="exampleFormControlTextarea1" class="form-label">Leave a Comments</label>
|
||||
<textarea class="form-control bg-light border-light"
|
||||
id="exampleFormControlTextarea1" rows="3"
|
||||
placeholder="Enter comments"></textarea>
|
||||
</div>
|
||||
<div class="col-lg-12 text-end">
|
||||
<a href="javascript:void(0);" class="btn btn-secondary">Post Comments</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Ticket Details</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless align-middle mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium">Ticket</td>
|
||||
<td>#VLZ<span id="t-no">135</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Client</td>
|
||||
<td id="t-client">Themesbrand</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Project</td>
|
||||
<td>Velzon - Admin Dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Assigned To:</td>
|
||||
<td>
|
||||
<div class="avatar-group">
|
||||
<a href="javascript:void(0);" class="avatar-group-item"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-trigger="hover" data-bs-original-title="Erica Kernan">
|
||||
<img src="/assets/images/users/avatar-4.jpg" alt=""
|
||||
class="rounded-circle avatar-xs" />
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="avatar-group-item"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-trigger="hover" data-bs-original-title="Alexis Clarke">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt=""
|
||||
class="rounded-circle avatar-xs" />
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="avatar-group-item"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-trigger="hover" data-bs-original-title="James Price">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt=""
|
||||
class="rounded-circle avatar-xs" />
|
||||
</a>
|
||||
<a href="javascript: void(0);" class="avatar-group-item"
|
||||
data-bs-toggle="tooltip" data-bs-trigger="hover"
|
||||
data-bs-placement="top" data-bs-original-title="Add Members">
|
||||
<div class="avatar-xs">
|
||||
<div
|
||||
class="avatar-title fs-16 rounded-circle bg-light border-dashed border text-primary">
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Status:</td>
|
||||
<td>
|
||||
<select class="form-select" id="t-status" data-choices
|
||||
data-choices-search-false aria-label="Default select example">
|
||||
<option value>Status</option>
|
||||
<option value="New" selected>New</option>
|
||||
<option value="Open">Open</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Closed">Closed</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Priority</td>
|
||||
<td>
|
||||
<span class="badge bg-danger" id="t-priority">High</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Create Date</td>
|
||||
<td id="c-date">20 Dec, 2021</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Due Date</td>
|
||||
<td id="d-date">29 Dec, 2021</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Last Activity</td>
|
||||
<td>14 min ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium">Labels</td>
|
||||
<td class="hstack text-wrap gap-1">
|
||||
<span class="badge badge-soft-primary">Admin</span>
|
||||
<span class="badge badge-soft-primary">UI</span>
|
||||
<span class="badge badge-soft-primary">Dashboard</span>
|
||||
<span class="badge badge-soft-primary">Design</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
<!--end card-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title fw-semibold mb-0">Files Attachment</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center border border-dashed p-2 rounded">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<i class="ri-file-zip-line fs-20 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="mb-1"><a href="javascript:void(0);">Velzon-admin.zip</a></h6>
|
||||
<small class="text-muted">3.2 MB</small>
|
||||
</div>
|
||||
<div class="hstack gap-3 fs-16">
|
||||
<a href="javascript:void(0);" class="text-muted"><i class="ri-download-2-line"></i></a>
|
||||
<a href="javascript:void(0);" class="text-muted"><i class="ri-delete-bin-line"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center border border-dashed p-2 rounded mt-2">
|
||||
<div class="flex-shrink-0 avatar-sm">
|
||||
<div class="avatar-title bg-light rounded">
|
||||
<i class="ri-file-ppt-2-line fs-20 text-danger"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="mb-1"><a href="javascript:void(0);">Velzon-admin.ppt</a></h6>
|
||||
<small class="text-muted">4.5 MB</small>
|
||||
</div>
|
||||
<div class="hstack gap-3 fs-16">
|
||||
<a href="javascript:void(0);" class="text-muted"><i class="ri-download-2-line"></i></a>
|
||||
<a href="javascript:void(0);" class="text-muted"><i class="ri-delete-bin-line"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- ticketdetail init js -->
|
||||
<script src="/assets/js/pages/ticketdetail.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,359 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Tickets List')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Sweet Alert css-->
|
||||
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<div th:replace="partials/page-title :: page-title('Tickets List','Tickets')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Total Tickets</p>
|
||||
<h4 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="547">0</span>k</h4>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 17.32 % </span> vs. previous month</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-primary text-primary rounded-circle fs-4">
|
||||
<i class="ri-ticket-2-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div> <!-- end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Pending Tickets</p>
|
||||
<h4 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="124">0</span>k</h4>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-danger mb-0"> <i class="ri-arrow-down-line align-middle"></i> 0.96 % </span> vs. previous month</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-warning text-warning rounded-circle fs-4">
|
||||
<i class="mdi mdi-timer-sand"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Closed Tickets</p>
|
||||
<h4 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="107">0</span>K</h4>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-danger mb-0"> <i class="ri-arrow-down-line align-middle"></i> 3.87 % </span> vs. previous month</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-secondary text-secondary rounded-circle fs-4">
|
||||
<i class="ri-shopping-bag-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-3 col-sm-6">
|
||||
<div class="card card-animate">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="fw-medium text-muted mb-0">Deleted Tickets</p>
|
||||
<h4 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="15.95">0</span>%</h4>
|
||||
<p class="mb-0 text-muted"><span class="badge bg-light text-success mb-0"> <i class="ri-arrow-up-line align-middle"></i> 1.09 % </span> vs. previous month</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="avatar-sm flex-shrink-0">
|
||||
<span class="avatar-title bg-soft-danger text-danger rounded-circle fs-4">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" id="ticketsList">
|
||||
<div class="card-header border-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<h5 class="card-title mb-0 flex-grow-1">Tickets</h5>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<button class="btn btn-primary add-btn" data-bs-toggle="modal" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Create Tickets</button>
|
||||
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body border border-dashed border-end-0 border-start-0">
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-xxl-5 col-sm-12">
|
||||
<div class="search-box">
|
||||
<input type="text" class="form-control search bg-light border-light" placeholder="Search for ticket details or something...">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-3 col-sm-4">
|
||||
<input type="text" class="form-control bg-light border-light" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" id="demo-datepicker" placeholder="Select date range">
|
||||
</div>
|
||||
<!--end col-->
|
||||
|
||||
<div class="col-xxl-3 col-sm-4">
|
||||
<div class="input-light">
|
||||
<select class="form-control" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
|
||||
<option value="">Status</option>
|
||||
<option value="all" selected>All</option>
|
||||
<option value="Open">Open</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Closed">Closed</option>
|
||||
<option value="New">New</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-xxl-1 col-sm-4">
|
||||
<button type="button" class="btn btn-secondary w-100" onclick="SearchData();"> <i class="ri-equalizer-fill me-1 align-bottom"></i>
|
||||
Filters
|
||||
</button>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
<div class="card-body">
|
||||
<div class="table-responsive table-card mb-4">
|
||||
<table class="table align-middle table-nowrap mb-0" id="ticketTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width: 40px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort" data-sort="id">ID</th>
|
||||
<th class="sort" data-sort="tasks_name">Title</th>
|
||||
<th class="sort" data-sort="client_name">Client</th>
|
||||
<th class="sort" data-sort="assignedto">Assigned To</th>
|
||||
<th class="sort" data-sort="create_date">Create Date</th>
|
||||
<th class="sort" data-sort="due_date">Due Date</th>
|
||||
<th class="sort" data-sort="status">Status</th>
|
||||
<th class="sort" data-sort="priority">Priority</th>
|
||||
<th class="sort" data-sort="action">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list form-check-all" id="ticket-list-data">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="checkAll" value="option1">
|
||||
</div>
|
||||
</th>
|
||||
<td class="id"><a href="javascript:void(0);" onclick="ViewTickets(this)" data-id="001" class="fw-medium link-primary">#VLZ001</a></td>
|
||||
<td class="tasks_name">Error message when placing an orders?</td>
|
||||
<td class="client_name">Tonya Noble</td>
|
||||
<td class="assignedto">James Morris</td>
|
||||
<td class="create_date">08 Dec, 2021</td>
|
||||
<td class="due_date">25 Jan, 2022</td>
|
||||
<td class="status"><span class="badge badge-soft-warning text-uppercase">Inprogress</span></td>
|
||||
<td class="priority"><span class="badge bg-danger text-uppercase">High</span></td>
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill align-middle"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><button class="dropdown-item" onclick="location.href = '/apps-tickets-details';"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</button></li>
|
||||
<li><a class="dropdown-item edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item remove-item-btn" data-bs-toggle="modal" href="#deleteOrder">
|
||||
<i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="noresult" style="display: none">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px"></lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">We've searched more than 150+ Tickets We did not find any Tickets for you search.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-2">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body p-5 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
|
||||
<div class="mt-4 text-center">
|
||||
<h4>You are about to delete a order ?</h4>
|
||||
<p class="text-muted fs-14 mb-4">Deleting your order will remove all of your information from our database.</p>
|
||||
<div class="hstack gap-2 justify-content-center remove">
|
||||
<button class="btn btn-link link-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
||||
<button class="btn btn-danger" id="delete-record">Yes, Delete It</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end modal -->
|
||||
</div>
|
||||
<!--end card-body-->
|
||||
</div>
|
||||
<!--end card-->
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<!--end row-->
|
||||
|
||||
<div class="modal fade zoomIn" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header p-3 bg-soft-info">
|
||||
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
||||
</div>
|
||||
<form class="tablelist-form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-12">
|
||||
<div id="modal-id">
|
||||
<label for="orderId" class="form-label">ID</label>
|
||||
<input type="text" id="orderId" class="form-control" placeholder="ID" value="#VLZ462" readonly />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label for="tasksTitle-field" class="form-label">Title</label>
|
||||
<input type="text" id="tasksTitle-field" class="form-control" placeholder="Title" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="client_nameName-field" class="form-label">Client Name</label>
|
||||
<input type="text" id="client_nameName-field" class="form-control" placeholder="Client Name" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="assignedtoName-field" class="form-label">Assigned To</label>
|
||||
<input type="text" id="assignedtoName-field" class="form-control" placeholder="Assigned to" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label for="date-field" class="form-label">Create Date</label>
|
||||
<input type="text" id="date-field" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" placeholder="Create Date" required />
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label for="duedate-field" class="form-label">Due Date</label>
|
||||
<input type="text" id="duedate-field" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" placeholder="Due Date" required />
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label for="ticket-status" class="form-label">Status</label>
|
||||
<select class="form-control" data-plugin="choices" name="ticket-status" id="ticket-status">
|
||||
<option value="">Status</option>
|
||||
<option value="New">New</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Closed">Closed</option>
|
||||
<option value="Open">Open</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label for="priority-field" class="form-label">Priority</label>
|
||||
<select class="form-control" data-plugin="choices" name="priority-field" id="priority-field">
|
||||
<option value="">Priority</option>
|
||||
<option value="High">High</option>
|
||||
<option value="Medium">Medium</option>
|
||||
<option value="Low">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-success" id="add-btn">Add Ticket</button>
|
||||
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- list.js min js -->
|
||||
<script src="/assets/libs/list.js/list.min.js"></script>
|
||||
|
||||
<!--list pagination js-->
|
||||
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
||||
|
||||
<!-- titcket init js -->
|
||||
<script src="/assets/js/pages/ticketlist.init.js"></script>
|
||||
|
||||
<!-- Sweet Alerts js -->
|
||||
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,473 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('To Do Lists')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
<!-- Dragula css -->
|
||||
<link rel="stylesheet" href="/assets/libs/dragula/dragula.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
|
||||
<div class="chat-wrapper d-lg-flex gap-1 mx-n4 mt-n4 p-1">
|
||||
<div class="file-manager-sidebar">
|
||||
<div class="p-4 d-flex flex-column h-100">
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-success w-100" data-bs-target="#createProjectModal"
|
||||
data-bs-toggle="modal"><i class="ri-add-line align-bottom"></i> Add Project</button>
|
||||
</div>
|
||||
|
||||
<div class="px-4 mx-n4" data-simplebar style="height: calc(100vh - 468px);">
|
||||
<ul class="to-do-menu list-unstyled" id="projectlist-data">
|
||||
<li>
|
||||
<a data-bs-toggle="collapse" href="#velzonAdmin" class="nav-link fs-13 active">Velzon
|
||||
Admin & Dashboard</a>
|
||||
<div class="collapse show" id="velzonAdmin">
|
||||
<ul class="mb-0 sub-menu list-unstyled ps-3 vstack gap-2 mb-2">
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-danger"></i>
|
||||
v1.4.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-secondary"></i>
|
||||
v1.5.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i class="ri-stop-mini-fill align-middle fs-15 text-info"></i>
|
||||
v1.6.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-primary"></i>
|
||||
v1.7.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-warning"></i>
|
||||
v1.8.0</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a data-bs-toggle="collapse" href="#projectManagement" class="nav-link fs-13">Project
|
||||
Management</a>
|
||||
<div class="collapse" id="projectManagement">
|
||||
<ul class="mb-0 sub-menu list-unstyled ps-3 vstack gap-2 mb-2">
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-danger"></i>
|
||||
v2.1.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-secondary"></i>
|
||||
v2.2.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i class="ri-stop-mini-fill align-middle fs-15 text-info"></i>
|
||||
v2.3.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-primary"></i>
|
||||
v2.4.0</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a data-bs-toggle="collapse" href="#skoteAdmin" class="nav-link fs-13">Skote Admin &
|
||||
Dashboard</a>
|
||||
<div class="collapse" id="skoteAdmin">
|
||||
<ul class="mb-0 sub-menu list-unstyled ps-3 vstack gap-2 mb-2">
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-danger"></i>
|
||||
v4.1.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-secondary"></i>
|
||||
v4.2.0</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a data-bs-toggle="collapse" href="#ecommerceProject" class="nav-link fs-13">Doot - Chat
|
||||
App Template</a>
|
||||
<div class="collapse" id="ecommerceProject">
|
||||
<ul class="mb-0 sub-menu list-unstyled ps-3 vstack gap-2 mb-2">
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-danger"></i>
|
||||
v1.0.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i
|
||||
class="ri-stop-mini-fill align-middle fs-15 text-secondary"></i>
|
||||
v1.1.0</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!"><i class="ri-stop-mini-fill align-middle fs-15 text-info"></i>
|
||||
v1.2.0</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-auto text-center">
|
||||
<img src="/assets/images/task.png" alt="Task" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end side content-->
|
||||
<div class="file-manager-content w-100 p-4 pb-0">
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto order-1 d-block d-lg-none">
|
||||
<button type="button" class="btn btn-soft-success btn-icon btn-sm fs-16 file-menu-btn">
|
||||
<i class="ri-menu-2-fill align-bottom"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm order-3 order-sm-2 mt-3 mt-sm-0">
|
||||
<h5 class="fw-semibold mb-0">Velzon Admin & Dashboard <span
|
||||
class="badge bg-primary align-bottom ms-2">v2.0.0</span></h5>
|
||||
</div>
|
||||
|
||||
<div class="col-auto order-2 order-sm-3 ms-auto">
|
||||
<div class="hstack gap-2">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button class="btn btn-icon fw-semibold btn-soft-danger"><i
|
||||
class="ri-arrow-go-back-line"></i></button>
|
||||
<button class="btn btn-icon fw-semibold btn-soft-success"><i
|
||||
class="ri-arrow-go-forward-line"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-light rounded mb-4">
|
||||
<div class="row g-2">
|
||||
<div class="col-lg-auto">
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
name="choices-select-sortlist" id="choices-select-sortlist">
|
||||
<option value="">Sort</option>
|
||||
<option value="By ID">By ID</option>
|
||||
<option value="By Name">By Name</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg-auto">
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
name="choices-select-status" id="choices-select-status">
|
||||
<option value="">All Tasks</option>
|
||||
<option value="Completed">Completed</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="New">New</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg">
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchTaskList" class="form-control search"
|
||||
placeholder="Search task name">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-auto">
|
||||
<button class="btn btn-primary createTask" type="button" data-bs-toggle="modal"
|
||||
data-bs-target="#createTask">
|
||||
<i class="ri-add-fill align-bottom"></i> Add Tasks
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="todo-content position-relative px-4 mx-n4" id="todo-content">
|
||||
<div id="elmLoader">
|
||||
<div class="spinner-border text-primary avatar-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="todo-task" id="todo-task">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle position-relative table-nowrap">
|
||||
<thead class="table-active">
|
||||
<tr>
|
||||
<th scope="col">Task Name</th>
|
||||
<th scope="col">Assigned</th>
|
||||
<th scope="col">Due Date</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Priority</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="task-list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4 mt-4 text-center" id="noresult" style="display: none;">
|
||||
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop"
|
||||
colors="primary:#405189,secondary:#0ab39c" style="width:72px;height:72px"></lord-icon>
|
||||
<h5 class="mt-4">Sorry! No Result Found</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
<!-- Start Create Project Modal -->
|
||||
<div class="modal fade zoomIn" id="createProjectModal" tabindex="-1" aria-labelledby="createProjectModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header p-3 bg-soft-success">
|
||||
<h5 class="modal-title" id="createProjectModalLabel">Create Project</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" id="addProjectBtn-close"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form autocomplete="off" class="needs-validation createProject-form" novalidate>
|
||||
<div class="mb-4">
|
||||
<label for="projectname-input" class="form-label">Project Name</label>
|
||||
<input type="text" class="form-control" id="projectname-input" autocomplete="off"
|
||||
placeholder="Enter project name" required>
|
||||
<div class="invalid-feedback">Please enter a project name</div>
|
||||
<input type="hidden" class="form-control" id="projectid-input" value=""
|
||||
placeholder="Enter project name">
|
||||
</div>
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-ghost-success" data-bs-dismiss="modal"><i
|
||||
class="ri-close-line align-bottom"></i> Close</button>
|
||||
<button type="submit" class="btn btn-primary" id="addNewProject">Add Project</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end modal-dialog -->
|
||||
</div>
|
||||
<!-- End Create Project Modal -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="createTask" tabindex="-1" aria-labelledby="createTaskLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header p-3 bg-soft-success">
|
||||
<h5 class="modal-title" id="createTaskLabel">Create Task</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" id="createTaskBtn-close"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="task-error-msg" class="alert alert-danger py-2"></div>
|
||||
<form autocomplete="off" action="" id="creattask-form">
|
||||
<input type="hidden" id="taskid-input" class="form-control">
|
||||
<div class="mb-3">
|
||||
<label for="task-title-input" class="form-label">Task Title</label>
|
||||
<input type="text" id="task-title-input" class="form-control"
|
||||
placeholder="Enter task title">
|
||||
</div>
|
||||
<div class="mb-3 position-relative">
|
||||
<label for="task-assign-input" class="form-label">Assigned To</label>
|
||||
|
||||
<div class="avatar-group justify-content-center" id="assignee-member"></div>
|
||||
<div class="select-element">
|
||||
<button class="btn btn-light w-100 d-flex justify-content-between" type="button"
|
||||
data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
||||
<span>Assigned To<b id="total-assignee" class="mx-1">0</b>Members</span> <i
|
||||
class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu w-100">
|
||||
<div data-simplebar style="max-height: 141px">
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-2.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">James Forbes</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-3.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">John Robles</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-4.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">Mary Gant</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-1.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">Curtis Saenz</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-5.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">Virgie Price</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-10.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">Anthony Mills</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-6.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">Marian Angel</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-7.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">Johnnie Walton</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-8.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">Donna Weston</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="avatar-xxs flex-shrink-0 me-2">
|
||||
<img src="/assets/images/users/avatar-9.jpg" alt=""
|
||||
class="img-fluid rounded-circle" />
|
||||
</div>
|
||||
<div class="flex-grow-1">Diego Norris</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-4 mb-3">
|
||||
<div class="col-lg-6">
|
||||
<label for="task-status" class="form-label">Status</label>
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
id="task-status-input">
|
||||
<option value="">Status</option>
|
||||
<option value="New" selected>New</option>
|
||||
<option value="Inprogress">Inprogress</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end col-->
|
||||
<div class="col-lg-6">
|
||||
<label for="priority-field" class="form-label">Priority</label>
|
||||
<select class="form-control" data-choices data-choices-search-false
|
||||
id="priority-field">
|
||||
<option value="">Priority</option>
|
||||
<option value="High">High</option>
|
||||
<option value="Medium">Medium</option>
|
||||
<option value="Low">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="task-duedate-input" class="form-label">Due Date:</label>
|
||||
<input type="date" id="task-duedate-input" class="form-control" placeholder="Due date">
|
||||
</div>
|
||||
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-ghost-success" data-bs-dismiss="modal"><i
|
||||
class="ri-close-fill align-bottom"></i> Close</button>
|
||||
<button type="submit" class="btn btn-primary" id="addNewTodo">Add Task</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end create taks-->
|
||||
|
||||
<!-- removeFileItemModal -->
|
||||
<div id="removeTaskItemModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
|
||||
id="close-removetodomodal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
|
||||
colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this task ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="remove-todoitem">Yes, Delete
|
||||
It!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
<!--end delete modal -->
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="pagejs">
|
||||
|
||||
<!-- dragula init js -->
|
||||
<script src="/assets/libs/dragula/dragula.min.js"></script>
|
||||
<script src="/assets/libs/dom-autoscroller/dom-autoscroller.min.js"></script>
|
||||
|
||||
<script src="/assets/js/pages/todo.init.js"></script>
|
||||
|
||||
</th:block>
|
||||
</body>
|
||||
@ -1,50 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('404 Error alt')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-5">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/hzomhqxz.json" trigger="loop" class="avatar-xl" colors="primary:#405189,secondary:#0ab39c">
|
||||
</lord-icon>
|
||||
<h1 class="text-primary mb-4">Oops !</h1>
|
||||
<h4 class="text-uppercase">Sorry, Page not Found 😭</h4>
|
||||
<p class="text-muted mb-4">The page you are looking for not available!</p>
|
||||
<a href="/" class="btn btn-secondary"><i class="mdi mdi-home me-1"></i>Back
|
||||
to home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,80 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('404 Error Basic')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center pt-4">
|
||||
<div class="">
|
||||
<img src="/assets/images/error.svg" alt="" class="error-basic-img move-animation">
|
||||
</div>
|
||||
<div class="mt-n4">
|
||||
<h1 class="display-1 fw-medium">404</h1>
|
||||
<h3 class="text-uppercase">Sorry, Page not Found 😭</h3>
|
||||
<p class="text-muted mb-4">The page you are looking for not available!</p>
|
||||
<a href="/" class="btn btn-secondary"><i class="mdi mdi-home me-1"></i>Back to
|
||||
home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
|
||||
</div>
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- particles js -->
|
||||
<script src="/assets/libs/particles.js/particles.js"></script>
|
||||
<!-- particles app js -->
|
||||
<script src="/assets/js/pages/particles.app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('404 Error Basic')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden p-0">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-7 col-lg-8">
|
||||
<div class="text-center">
|
||||
<img src="assets/images/error400-cover.png" alt="error img" class="img-fluid">
|
||||
<div class="mt-3">
|
||||
<h3 class="text-uppercase">Sorry, Page not Found 😭</h3>
|
||||
<p class="text-muted mb-4">The page you are looking for not available!</p>
|
||||
<a href="/" class="btn btn-secondary"><i class="mdi mdi-home me-1"></i>Back to home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth-page content -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,44 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('500 Error')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden p-0">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-4 text-center">
|
||||
<div class="error-500 position-relative">
|
||||
<img src="/assets/images/error500.png" alt="" class="img-fluid error-500-img error-img" />
|
||||
<h1 class="title text-muted">500</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Internal Server Error!</h4>
|
||||
<p class="text-muted w-75 mx-auto">Server Error 500. We're not exactly sure what happened,
|
||||
but our servers say something is wrong.</p>
|
||||
<a href="/" class="btn btn-secondary"><i class="mdi mdi-home me-1"></i>Back to
|
||||
home</a>
|
||||
</div>
|
||||
</div><!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth-page content -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,109 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Lock Screen')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mt-sm-5 mb-4 text-white-50">
|
||||
<div>
|
||||
<a href="/" class="d-inline-block auth-logo">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="20">
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-3 fs-15 fw-medium">Premium Admin & Dashboard Template</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card mt-4">
|
||||
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center mt-2">
|
||||
<h5 class="text-primary">Lock Screen</h5>
|
||||
<p class="text-muted">Enter your password to unlock the screen!</p>
|
||||
</div>
|
||||
<div class="user-thumb text-center">
|
||||
<img src="/assets/images/users/avatar-1.jpg" class="rounded-circle img-thumbnail avatar-lg" alt="thumbnail">
|
||||
<h5 class="font-size-15 mt-3">Anna Adame</h5>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="userpassword">Password</label>
|
||||
<input type="password" class="form-control" id="userpassword" placeholder="Enter password" required>
|
||||
</div>
|
||||
<div class="mb-2 mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Unlock</button>
|
||||
</div>
|
||||
</form><!-- end form -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p class="mb-0">Not you ? return <a href="/auth-signin-basic" class="fw-semibold text-primary text-decoration-underline"> Signin </a> </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- particles js -->
|
||||
<script src="/assets/libs/particles.js/particles.js"></script>
|
||||
<!-- particles app js -->
|
||||
<script src="/assets/js/pages/particles.app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,141 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Lock Screen')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="row justify-content-center g-0">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 auth-one-bg h-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="position-relative h-100 d-flex flex-column">
|
||||
<div class="mb-4">
|
||||
<a href="/" class="d-block">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="18">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="mb-3">
|
||||
<i class="ri-double-quotes-l display-4 text-success"></i>
|
||||
</div>
|
||||
|
||||
<div id="qoutescarouselIndicators" class="carousel slide"
|
||||
data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="0" class="active" aria-current="true"
|
||||
aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner text-center text-white-50 pb-5">
|
||||
<div class="carousel-item active">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" The theme is really great with
|
||||
an amazing customer support."</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end carousel -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4">
|
||||
<div>
|
||||
<h5 class="text-primary">Lock Screen</h5>
|
||||
<p class="text-muted">Enter your password to unlock the screen!</p>
|
||||
</div>
|
||||
<div class="user-thumb text-center">
|
||||
<img src="/assets/images/users/avatar-1.jpg"
|
||||
class="rounded-circle img-thumbnail avatar-lg" alt="thumbnail">
|
||||
<h5 class="mt-3">Anna Adame</h5>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="userpassword">Password</label>
|
||||
<input type="password" class="form-control" id="userpassword"
|
||||
placeholder="Enter password" required>
|
||||
</div>
|
||||
<div class="mb-2 mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Unlock</button>
|
||||
</div>
|
||||
</form><!-- end form -->
|
||||
</div>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
<p class="mb-0">Not you ? return <a href="/auth-signin-cover"
|
||||
class="fw-semibold text-primary text-decoration-underline">
|
||||
Signin</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,97 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Log Out')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mt-sm-5 mb-4 text-white-50">
|
||||
<div>
|
||||
<a href="index.html" class="d-inline-block auth-logo">
|
||||
<img src="assets/images/logo-light.png" alt="" height="20">
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-3 fs-15 fw-medium">Premium Admin & Dashboard Template</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card mt-4">
|
||||
<div class="card-body p-4 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/hzomhqxz.json" trigger="loop" colors="primary:#405189,secondary:#08a88a" style="width:180px;height:180px"></lord-icon>
|
||||
|
||||
<div class="mt-4 pt-2">
|
||||
<h5>You are Logged Out</h5>
|
||||
<p class="text-muted">Thank you for using <span class="fw-semibold">velzon</span> admin template</p>
|
||||
<div class="mt-4">
|
||||
<a href="/auth-signin-basic" class="btn btn-secondary w-100">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- particles js -->
|
||||
<script src="/assets/libs/particles.js/particles.js"></script>
|
||||
|
||||
<!-- particles app js -->
|
||||
<script src="/assets/js/pages/particles.app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,126 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Log Out')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="row justify-content-center g-0">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 auth-one-bg h-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="position-relative h-100 d-flex flex-column">
|
||||
<div class="mb-4">
|
||||
<a href="/" class="d-block">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="18">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="mb-3">
|
||||
<i class="ri-double-quotes-l display-4 text-success"></i>
|
||||
</div>
|
||||
|
||||
<div id="qoutescarouselIndicators" class="carousel slide"
|
||||
data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="0" class="active" aria-current="true"
|
||||
aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner text-center text-white-50 pb-5">
|
||||
<div class="carousel-item active">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" The theme is really great with
|
||||
an amazing customer support."</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end carousel -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/hzomhqxz.json" trigger="loop"
|
||||
colors="primary:#405189,secondary:#08a88a" style="width:180px;height:180px">
|
||||
</lord-icon>
|
||||
|
||||
<div class="mt-4 pt-2">
|
||||
<h5>You are Logged Out</h5>
|
||||
<p class="text-muted">Thank you for using <span
|
||||
class="fw-semibold">velzon</span> admin template</p>
|
||||
<div class="mt-4">
|
||||
<a href="/auth-signin-basic" class="btn btn-secondary w-100">Sign
|
||||
In</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,53 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Offline Page')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-5">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center">
|
||||
<img src="https://img.themesbrand.com/velzon/images/auth-offline.gif" alt=""
|
||||
height="210">
|
||||
<h3 class="mt-4 fw-semibold">We're currently offline</h3>
|
||||
<p class="text-muted mb-4 fs-14">We can't show you this images because you aren't
|
||||
connected to the internet. When you’re back online refresh the page or hit the
|
||||
button below</p>
|
||||
<button class="btn btn-secondary btn-border"
|
||||
onClick="window.location.href=window.location.href"><i
|
||||
class="ri-refresh-line align-bottom"></i> Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,162 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Create New Password')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mt-sm-5 mb-4 text-white-50">
|
||||
<div>
|
||||
<a href="/" class="d-inline-block auth-logo">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="20">
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-3 fs-15 fw-medium">Premium Admin & Dashboard Template</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card mt-4">
|
||||
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center mt-2">
|
||||
<h5 class="text-primary">Create new password</h5>
|
||||
<p class="text-muted">Your new password must be different from previous used
|
||||
password.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<form action="/auth-signin-basic">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="password-input">Password</label>
|
||||
<div class="position-relative auth-pass-inputgroup">
|
||||
<input type="password" class="form-control pe-5 password-input"
|
||||
onpaste="return false" placeholder="Enter password"
|
||||
id="password-input" aria-describedby="passwordInput"
|
||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
|
||||
<button
|
||||
class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
|
||||
type="button" id="password-addon"><i
|
||||
class="ri-eye-fill align-middle"></i></button>
|
||||
</div>
|
||||
<div id="passwordInput" class="form-text">Must be at least 8 characters.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="confirm-password-input">Confirm
|
||||
Password</label>
|
||||
<div class="position-relative auth-pass-inputgroup mb-3">
|
||||
<input type="password" class="form-control pe-5 password-input"
|
||||
onpaste="return false" placeholder="Confirm password"
|
||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
||||
id="confirm-password-input" required>
|
||||
<button
|
||||
class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
|
||||
type="button" id="confirm-password-input"><i
|
||||
class="ri-eye-fill align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="password-contain" class="p-3 bg-light mb-2 rounded">
|
||||
<h5 class="fs-13">Password must contain:</h5>
|
||||
<p id="pass-length" class="invalid fs-12 mb-2">Minimum <b>8 characters</b>
|
||||
</p>
|
||||
<p id="pass-lower" class="invalid fs-12 mb-2">At <b>lowercase</b> letter
|
||||
(a-z)</p>
|
||||
<p id="pass-upper" class="invalid fs-12 mb-2">At least <b>uppercase</b>
|
||||
letter (A-Z)</p>
|
||||
<p id="pass-number" class="invalid fs-12 mb-0">A least <b>number</b> (0-9)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="auth-remember-check">
|
||||
<label class="form-check-label" for="auth-remember-check">Remember
|
||||
me</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Reset Password</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p class="mb-0">Wait, I remember my password... <a href="/auth-signin-basic"
|
||||
class="fw-semibold text-primary text-decoration-underline"> Click here </a> </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- particles js -->
|
||||
<script src="/assets/libs/particles.js/particles.js"></script>
|
||||
|
||||
<!-- particles app js -->
|
||||
<script src="/assets/js/pages/particles.app.js"></script>
|
||||
|
||||
<!-- password-addon init -->
|
||||
<script src="/assets/js/pages/passowrd-create.init.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,185 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Create New Password')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="row justify-content-center g-0">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 auth-one-bg h-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="position-relative h-100 d-flex flex-column">
|
||||
<div class="mb-4">
|
||||
<a href="/" class="d-block">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="18">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="mb-3">
|
||||
<i class="ri-double-quotes-l display-4 text-success"></i>
|
||||
</div>
|
||||
|
||||
<div id="qoutescarouselIndicators" class="carousel slide"
|
||||
data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="0" class="active" aria-current="true"
|
||||
aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner text-center text-white-50 pb-5">
|
||||
<div class="carousel-item active">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" The theme is really great with
|
||||
an amazing customer support."</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end carousel -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4">
|
||||
<h5 class="text-primary">Create new password</h5>
|
||||
<p class="text-muted">Your new password must be different from previous used
|
||||
password.</p>
|
||||
|
||||
<div class="p-2">
|
||||
<form action="/auth-signin-basic">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="password-input">Password</label>
|
||||
<div class="position-relative auth-pass-inputgroup">
|
||||
<input type="password" class="form-control pe-5 password-input"
|
||||
onpaste="return false" placeholder="Enter password"
|
||||
id="password-input" aria-describedby="passwordInput"
|
||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
|
||||
<button
|
||||
class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
|
||||
type="button" id="password-addon"><i
|
||||
class="ri-eye-fill align-middle"></i></button>
|
||||
</div>
|
||||
<div id="passwordInput" class="form-text">Must be at least 8
|
||||
characters.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="confirm-password-input">Confirm
|
||||
Password</label>
|
||||
<div class="position-relative auth-pass-inputgroup mb-3">
|
||||
<input type="password" class="form-control pe-5 password-input"
|
||||
onpaste="return false" placeholder="Confirm password"
|
||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
||||
id="confirm-password-input" required>
|
||||
<button
|
||||
class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
|
||||
type="button" id="confirm-password-input"><i
|
||||
class="ri-eye-fill align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="password-contain" class="p-3 bg-light mb-2 rounded">
|
||||
<h5 class="fs-13">Password must contain:</h5>
|
||||
<p id="pass-length" class="invalid fs-12 mb-2">Minimum <b>8
|
||||
characters</b></p>
|
||||
<p id="pass-lower" class="invalid fs-12 mb-2">At <b>lowercase</b>
|
||||
letter (a-z)</p>
|
||||
<p id="pass-upper" class="invalid fs-12 mb-2">At least
|
||||
<b>uppercase</b> letter (A-Z)</p>
|
||||
<p id="pass-number" class="invalid fs-12 mb-0">A least <b>number</b>
|
||||
(0-9)</p>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="auth-remember-check">
|
||||
<label class="form-check-label" for="auth-remember-check">Remember
|
||||
me</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Reset
|
||||
Password</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
<p class="mb-0">Wait, I remember my password... <a
|
||||
href="/auth-signin-cover"
|
||||
class="fw-semibold text-primary text-decoration-underline"> Click
|
||||
here </a> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- password-addon init -->
|
||||
<script src="assets/js/pages/passowrd-create.init.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,120 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Reset Password')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mt-sm-5 mb-4 text-white-50">
|
||||
<div>
|
||||
<a href="/" class="d-inline-block auth-logo">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="20">
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-3 fs-15 fw-medium">Premium Admin & Dashboard Template</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card mt-4">
|
||||
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center mt-2">
|
||||
<h5 class="text-primary">Forgot Password?</h5>
|
||||
<p class="text-muted">Reset password with velzon</p>
|
||||
|
||||
<lord-icon src="https://cdn.lordicon.com/rhvddzym.json" trigger="loop"
|
||||
colors="primary:#0ab39c" class="avatar-xl"></lord-icon>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="alert alert-borderless alert-warning text-center mb-2 mx-2" role="alert">
|
||||
Enter your email and instructions will be sent to you!
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<form>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email"
|
||||
placeholder="Enter Email">
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Send Reset Link</button>
|
||||
</div>
|
||||
</form><!-- end form -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p class="mb-0">Wait, I remember my password... <a href="/auth-signin-basic"
|
||||
class="fw-semibold text-primary text-decoration-underline"> Click here </a> </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- particles js -->
|
||||
<script src="/assets/libs/particles.js/particles.js"></script>
|
||||
|
||||
<!-- particles app js -->
|
||||
<script src="/assets/js/pages/particles.app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,147 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Reset Password')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="row justify-content-center g-0">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 auth-one-bg h-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="position-relative h-100 d-flex flex-column">
|
||||
<div class="mb-4">
|
||||
<a href="/" class="d-block">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="18">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="mb-3">
|
||||
<i class="ri-double-quotes-l display-4 text-success"></i>
|
||||
</div>
|
||||
|
||||
<div id="qoutescarouselIndicators" class="carousel slide"
|
||||
data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="0" class="active" aria-current="true"
|
||||
aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner text-center text-white-50 pb-5">
|
||||
<div class="carousel-item active">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" The theme is really great with
|
||||
an amazing customer support."</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end carousel -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4">
|
||||
<h5 class="text-primary">Forgot Password?</h5>
|
||||
<p class="text-muted">Reset password with velzon</p>
|
||||
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/rhvddzym.json" trigger="loop"
|
||||
colors="primary:#0ab39c" class="avatar-xl">
|
||||
</lord-icon>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-borderless alert-warning text-center mb-2 mx-2"
|
||||
role="alert">
|
||||
Enter your email and instructions will be sent to you!
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<form>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email"
|
||||
placeholder="Enter email address">
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Send Reset
|
||||
Link</button>
|
||||
</div>
|
||||
</form><!-- end form -->
|
||||
</div>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
<p class="mb-0">Wait, I remember my password... <a
|
||||
href="/auth-signin-cover"
|
||||
class="fw-semibold text-primary text-decoration-underline"> Click
|
||||
here </a> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,150 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark"
|
||||
data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Sign In')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mt-sm-5 mb-4 text-white-50">
|
||||
<div>
|
||||
<a href="index.html" class="d-inline-block auth-logo">
|
||||
<img src="assets/images/logo-light.png" alt="" height="20">
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-3 fs-15 fw-medium">Premium Admin & Dashboard Template</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card mt-4">
|
||||
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center mt-2">
|
||||
<h5 class="text-primary">Welcome Back !</h5>
|
||||
<p class="text-muted">Sign in to continue to Velzon.</p>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<form action="/">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input type="text" class="form-control" id="username"
|
||||
placeholder="Enter username">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="float-end">
|
||||
<a href="/auth-pass-reset-basic" class="text-muted">Forgot
|
||||
password?</a>
|
||||
</div>
|
||||
<label class="form-label" for="password-input">Password</label>
|
||||
<div class="position-relative auth-pass-inputgroup mb-3">
|
||||
<input type="password" class="form-control pe-5 password-input"
|
||||
placeholder="Enter password" id="password-input">
|
||||
<button
|
||||
class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
|
||||
type="button" id="password-addon"><i
|
||||
class="ri-eye-fill align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="auth-remember-check">
|
||||
<label class="form-check-label" for="auth-remember-check">Remember
|
||||
me</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Sign In</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<div class="signin-other-title">
|
||||
<h5 class="fs-13 mb-4 title">Sign In with</h5>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button"
|
||||
class="btn btn-primary btn-icon waves-effect waves-light"><i
|
||||
class="ri-facebook-fill fs-16"></i></button>
|
||||
<button type="button"
|
||||
class="btn btn-danger btn-icon waves-effect waves-light"><i
|
||||
class="ri-google-fill fs-16"></i></button>
|
||||
<button type="button"
|
||||
class="btn btn-dark btn-icon waves-effect waves-light"><i
|
||||
class="ri-github-fill fs-16"></i></button>
|
||||
<button type="button"
|
||||
class="btn btn-info btn-icon waves-effect waves-light"><i
|
||||
class="ri-twitter-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p class="mb-0">Don't have an account ? <a href="/auth-signup-basic"
|
||||
class="fw-semibold text-primary text-decoration-underline"> Signup </a> </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,160 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Sign In')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="row g-0">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 auth-one-bg h-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="position-relative h-100 d-flex flex-column">
|
||||
<div class="mb-4">
|
||||
<a href="/" class="d-block">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="18">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="mb-3">
|
||||
<i class="ri-double-quotes-l display-4 text-success"></i>
|
||||
</div>
|
||||
|
||||
<div id="qoutescarouselIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner text-center text-white-50 pb-5">
|
||||
<div class="carousel-item active">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" The theme is really great with
|
||||
an amazing customer support."</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end carousel -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4">
|
||||
<div>
|
||||
<h5 class="text-primary">Welcome Back !</h5>
|
||||
<p class="text-muted">Sign in to continue to Velzon.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<form action="/">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input type="text" class="form-control" id="username" placeholder="Enter username">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="float-end">
|
||||
<a href="/auth-pass-reset-cover" class="text-muted">Forgot
|
||||
password?</a>
|
||||
</div>
|
||||
<label class="form-label" for="password-input">Password</label>
|
||||
<div class="position-relative auth-pass-inputgroup mb-3">
|
||||
<input type="password" class="form-control pe-5 password-input" placeholder="Enter password" id="password-input">
|
||||
<button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon"><i class="ri-eye-fill align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="auth-remember-check">
|
||||
<label class="form-check-label" for="auth-remember-check">Remember
|
||||
me</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Sign In</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<div class="signin-other-title">
|
||||
<h5 class="fs-13 mb-4 title">Sign In with</h5>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary btn-icon waves-effect waves-light"><i class="ri-facebook-fill fs-16"></i></button>
|
||||
<button type="button" class="btn btn-danger btn-icon waves-effect waves-light"><i class="ri-google-fill fs-16"></i></button>
|
||||
<button type="button" class="btn btn-dark btn-icon waves-effect waves-light"><i class="ri-github-fill fs-16"></i></button>
|
||||
<button type="button" class="btn btn-info btn-icon waves-effect waves-light"><i class="ri-twitter-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
<p class="mb-0">Don't have an account ? <a href="/auth-signup-cover" class="fw-semibold text-primary text-decoration-underline">
|
||||
Signup</a> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- password-addon init -->
|
||||
<script src="/assets/js/pages/password-addon.init.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,186 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Sign Up')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mt-sm-5 mb-4 text-white-50">
|
||||
<div>
|
||||
<a href="/" class="d-inline-block auth-logo">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="20">
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-3 fs-15 fw-medium">Premium Admin & Dashboard Template</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card mt-4">
|
||||
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center mt-2">
|
||||
<h5 class="text-primary">Create New Account</h5>
|
||||
<p class="text-muted">Get your free velzon account now</p>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<form class="needs-validation" novalidate action="/">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="useremail" class="form-label">Email <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="useremail"
|
||||
placeholder="Enter email address" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter email
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username <span
|
||||
class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="username"
|
||||
placeholder="Enter username" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter username
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="password-input">Password</label>
|
||||
<div class="position-relative auth-pass-inputgroup">
|
||||
<input type="password" class="form-control pe-5 password-input"
|
||||
onpaste="return false" placeholder="Enter password"
|
||||
id="password-input" aria-describedby="passwordInput"
|
||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
|
||||
<button
|
||||
class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
|
||||
type="button" id="password-addon"><i
|
||||
class="ri-eye-fill align-middle"></i></button>
|
||||
<div class="invalid-feedback">
|
||||
Please enter password
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<p class="mb-0 fs-12 text-muted fst-italic">By registering you agree to the
|
||||
Velzon <a href="#"
|
||||
class="text-primary text-decoration-underline fst-normal fw-medium">Terms
|
||||
of Use</a></p>
|
||||
</div>
|
||||
|
||||
<div id="password-contain" class="p-3 bg-light mb-2 rounded">
|
||||
<h5 class="fs-13">Password must contain:</h5>
|
||||
<p id="pass-length" class="invalid fs-12 mb-2">Minimum <b>8 characters</b>
|
||||
</p>
|
||||
<p id="pass-lower" class="invalid fs-12 mb-2">At <b>lowercase</b> letter
|
||||
(a-z)</p>
|
||||
<p id="pass-upper" class="invalid fs-12 mb-2">At least <b>uppercase</b>
|
||||
letter (A-Z)</p>
|
||||
<p id="pass-number" class="invalid fs-12 mb-0">A least <b>number</b> (0-9)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Sign Up</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<div class="signin-other-title">
|
||||
<h5 class="fs-13 mb-4 title text-muted">Create account with</h5>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button"
|
||||
class="btn btn-primary btn-icon waves-effect waves-light"><i
|
||||
class="ri-facebook-fill fs-16"></i></button>
|
||||
<button type="button"
|
||||
class="btn btn-danger btn-icon waves-effect waves-light"><i
|
||||
class="ri-google-fill fs-16"></i></button>
|
||||
<button type="button"
|
||||
class="btn btn-dark btn-icon waves-effect waves-light"><i
|
||||
class="ri-github-fill fs-16"></i></button>
|
||||
<button type="button"
|
||||
class="btn btn-info btn-icon waves-effect waves-light"><i
|
||||
class="ri-twitter-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p class="mb-0">Already have an account ? <a href="/auth-signin-basic"
|
||||
class="fw-semibold text-primary text-decoration-underline"> Signin </a> </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- particles js -->
|
||||
<script src="/assets/libs/particles.js/particles.js"></script>
|
||||
<!-- particles app js -->
|
||||
<script src="/assets/js/pages/particles.app.js"></script>
|
||||
<!-- validation init -->
|
||||
<script src="/assets/js/pages/form-validation.init.js"></script>
|
||||
<!-- password create init -->
|
||||
<script src="/assets/js/pages/passowrd-create.init.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,183 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Sign Up')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden m-0">
|
||||
<div class="row justify-content-center g-0">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 auth-one-bg h-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="position-relative h-100 d-flex flex-column">
|
||||
<div class="mb-4">
|
||||
<a href="" class="d-block">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="18">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="mb-3">
|
||||
<i class="ri-double-quotes-l display-4 text-success"></i>
|
||||
</div>
|
||||
|
||||
<div id="qoutescarouselIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner text-center text-white-50 pb-5">
|
||||
<div class="carousel-item active">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" The theme is really great with
|
||||
an amazing customer support."</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end carousel -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4">
|
||||
<div>
|
||||
<h5 class="text-primary">Register Account</h5>
|
||||
<p class="text-muted">Get your Free Velzon account now.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<form class="needs-validation" novalidate action="/">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="useremail" class="form-label">Email <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="useremail" placeholder="Enter email address" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter email
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="username" placeholder="Enter username" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter username
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="password-input">Password</label>
|
||||
<div class="position-relative auth-pass-inputgroup">
|
||||
<input type="password" class="form-control pe-5 password-input" onpaste="return false" placeholder="Enter password" id="password-input" aria-describedby="passwordInput" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
|
||||
<button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon"><i class="ri-eye-fill align-middle"></i></button>
|
||||
<div class="invalid-feedback">
|
||||
Please enter password
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<p class="mb-0 fs-12 text-muted fst-italic">By registering you agree
|
||||
to the Velzon <a href="#" class="text-primary text-decoration-underline fst-normal fw-medium">Terms
|
||||
of Use</a></p>
|
||||
</div>
|
||||
|
||||
<div id="password-contain" class="p-3 bg-light mb-2 rounded">
|
||||
<h5 class="fs-13">Password must contain:</h5>
|
||||
<p id="pass-length" class="invalid fs-12 mb-2">Minimum <b>8
|
||||
characters</b></p>
|
||||
<p id="pass-lower" class="invalid fs-12 mb-2">At <b>lowercase</b>
|
||||
letter (a-z)</p>
|
||||
<p id="pass-upper" class="invalid fs-12 mb-2">At least
|
||||
<b>uppercase</b> letter (A-Z)
|
||||
</p>
|
||||
<p id="pass-number" class="invalid fs-12 mb-0">A least <b>number</b>
|
||||
(0-9)</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-secondary w-100" type="submit">Sign Up</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<div class="signin-other-title">
|
||||
<h5 class="fs-13 mb-4 title text-muted">Create account with</h5>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary btn-icon waves-effect waves-light"><i class="ri-facebook-fill fs-16"></i></button>
|
||||
<button type="button" class="btn btn-danger btn-icon waves-effect waves-light"><i class="ri-google-fill fs-16"></i></button>
|
||||
<button type="button" class="btn btn-dark btn-icon waves-effect waves-light"><i class="ri-github-fill fs-16"></i></button>
|
||||
<button type="button" class="btn btn-info btn-icon waves-effect waves-light"><i class="ri-twitter-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
<p class="mb-0">Already have an account ? <a href="/auth-signin-cover" class="fw-semibold text-primary text-decoration-underline">
|
||||
Signin</a> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- validation init -->
|
||||
<script src="/assets/js/pages/form-validation.init.js"></script>
|
||||
<!-- password create init -->
|
||||
<script src="/assets/js/pages/passowrd-create.init.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,104 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Success Message')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mt-sm-5 mb-4 text-white-50">
|
||||
<div>
|
||||
<a href="/" class="d-inline-block auth-logo">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="20">
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-3 fs-15 fw-medium">Premium Admin & Dashboard Template</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card mt-4">
|
||||
<div class="card-body p-4 text-center">
|
||||
<div class="avatar-lg mx-auto mt-2">
|
||||
<div class="avatar-title bg-light text-success display-3 rounded-circle">
|
||||
<i class="ri-checkbox-circle-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-2">
|
||||
<h4>Well done !</h4>
|
||||
<p class="text-muted mx-4">Aww yeah, you successfully read this important message.
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<a href="/auth-signin-basic" class="btn btn-secondary w-100">Back to
|
||||
Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- particles js -->
|
||||
<script src="/assets/libs/particles.js/particles.js"></script>
|
||||
<!-- particles app js -->
|
||||
<script src="/assets/js/pages/particles.app.js"></script>
|
||||
<!-- password-addon init -->
|
||||
<script src="/assets/js/pages/password-addon.init.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,128 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Success Message')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="row justify-content-center g-0">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 auth-one-bg h-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="position-relative h-100 d-flex flex-column">
|
||||
<div class="mb-4">
|
||||
<a href="/" class="d-block">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="18">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="mb-3">
|
||||
<i class="ri-double-quotes-l display-4 text-success"></i>
|
||||
</div>
|
||||
|
||||
<div id="qoutescarouselIndicators" class="carousel slide"
|
||||
data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="0" class="active" aria-current="true"
|
||||
aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner text-center text-white-50 pb-5">
|
||||
<div class="carousel-item active">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" The theme is really great with
|
||||
an amazing customer support."</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15 fst-italic">" Great! Clean code, clean
|
||||
design, easy for customization. Thanks very much! "</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end carousel -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 text-center">
|
||||
<div class="avatar-lg mx-auto mt-2">
|
||||
<div class="avatar-title bg-light text-success display-3 rounded-circle">
|
||||
<i class="ri-checkbox-circle-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-2">
|
||||
<h4>Well done !</h4>
|
||||
<p class="text-muted mx-4">Aww yeah, you successfully read this important
|
||||
message.</p>
|
||||
<div class="mt-4">
|
||||
<a href="/auth-signin-basic" class="btn btn-secondary w-100">Back to
|
||||
Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,155 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Two Step Verification')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="auth-page-wrapper pt-5">
|
||||
<!-- auth page bg -->
|
||||
<div class="auth-one-bg-position auth-one-bg" id="auth-particles">
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
<div class="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 1440 120">
|
||||
<path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auth page content -->
|
||||
<div class="auth-page-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mt-sm-5 mb-4 text-white-50">
|
||||
<div>
|
||||
<a href="/" class="d-inline-block auth-logo">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="20">
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-3 fs-15 fw-medium">Premium Admin & Dashboard Template</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card mt-4">
|
||||
|
||||
<div class="card-body p-4">
|
||||
<div class="mb-4">
|
||||
<div class="avatar-lg mx-auto">
|
||||
<div class="avatar-title bg-light text-primary display-5 rounded-circle">
|
||||
<i class="ri-mail-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2 mt-4">
|
||||
<div class="text-muted text-center mb-4 mx-lg-3">
|
||||
<h4>Verify Your Email</h4>
|
||||
<p>Please enter the 4 digit code sent to <span
|
||||
class="fw-semibold">example@abc.com</span></p>
|
||||
</div>
|
||||
|
||||
<form autocomplete="off">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="mb-3">
|
||||
<label for="digit1-input" class="visually-hidden">Digit 1</label>
|
||||
<input type="text"
|
||||
class="form-control form-control-lg bg-light border-light text-center"
|
||||
onkeyup="moveToNext(1, event)" maxLength="1" id="digit1-input">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-3">
|
||||
<div class="mb-3">
|
||||
<label for="digit2-input" class="visually-hidden">Digit 2</label>
|
||||
<input type="text"
|
||||
class="form-control form-control-lg bg-light border-light text-center"
|
||||
onkeyup="moveToNext(2, event)" maxLength="1" id="digit2-input">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-3">
|
||||
<div class="mb-3">
|
||||
<label for="digit3-input" class="visually-hidden">Digit 3</label>
|
||||
<input type="text"
|
||||
class="form-control form-control-lg bg-light border-light text-center"
|
||||
onkeyup="moveToNext(3, event)" maxLength="1" id="digit3-input">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-3">
|
||||
<div class="mb-3">
|
||||
<label for="digit4-input" class="visually-hidden">Digit 4</label>
|
||||
<input type="text"
|
||||
class="form-control form-control-lg bg-light border-light text-center"
|
||||
onkeyup="moveToNext(4, event)" maxLength="1" id="digit4-input">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
</form><!-- end form -->
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="button" class="btn btn-secondary w-100">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p class="mb-0">Didn't receive a code ? <a href="/auth-pass-reset-basic"
|
||||
class="fw-semibold text-primary text-decoration-underline">Resend</a> </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0 text-muted">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
<!-- particles js -->
|
||||
<script src="/assets/libs/particles.js/particles.js"></script>
|
||||
<!-- particles app js -->
|
||||
<script src="/assets/js/pages/particles.app.js"></script>
|
||||
<!-- two-step-verification js -->
|
||||
<script src="/assets/js/pages/two-step-verification.init.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,189 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
|
||||
data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
|
||||
data-preloader="disable">
|
||||
|
||||
<head>
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Two Step Verification')"></div>
|
||||
|
||||
<!-- Page CSS -->
|
||||
<div th:replace="partials/head-css :: head-css"></div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- auth-page wrapper -->
|
||||
<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<!-- auth-page content -->
|
||||
<div class="auth-page-content overflow-hidden pt-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="row justify-content-center g-0">
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4 auth-one-bg h-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="position-relative h-100 d-flex flex-column">
|
||||
<div class="mb-4">
|
||||
<a href="/" class="d-block">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="18">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="mb-3">
|
||||
<i class="ri-double-quotes-l display-4 text-success"></i>
|
||||
</div>
|
||||
|
||||
<div id="qoutescarouselIndicators" class="carousel slide"
|
||||
data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="0" class="active" aria-current="true"
|
||||
aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#qoutescarouselIndicators"
|
||||
data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner text-center text-white-50 pb-5">
|
||||
<div class="carousel-item active">
|
||||
<p class="fs-15">" Great! Clean code, clean design, easy for
|
||||
customization. Thanks very much! "</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15">" The theme is really great with an amazing
|
||||
customer support."</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p class="fs-15">" Great! Clean code, clean design, easy for
|
||||
customization. Thanks very much! "</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end carousel -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="p-lg-5 p-4">
|
||||
<div class="mb-4">
|
||||
<div class="avatar-lg mx-auto">
|
||||
<div
|
||||
class="avatar-title bg-light text-primary display-5 rounded-circle">
|
||||
<i class="ri-mail-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted text-center mx-lg-3">
|
||||
<h4 class="">Verify Your Email</h4>
|
||||
<p>Please enter the 4 digit code sent to <span
|
||||
class="fw-semibold">example@abc.com</span></p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<form autocomplete="off">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="mb-3">
|
||||
<label for="digit1-input" class="visually-hidden">Digit
|
||||
1</label>
|
||||
<input type="text"
|
||||
class="form-control form-control-lg bg-light border-light text-center"
|
||||
onkeyup="moveToNext(1, event)" maxLength="1"
|
||||
id="digit1-input">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-3">
|
||||
<div class="mb-3">
|
||||
<label for="digit2-input" class="visually-hidden">Digit
|
||||
2</label>
|
||||
<input type="text"
|
||||
class="form-control form-control-lg bg-light border-light text-center"
|
||||
onkeyup="moveToNext(2, event)" maxLength="1"
|
||||
id="digit2-input">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-3">
|
||||
<div class="mb-3">
|
||||
<label for="digit3-input" class="visually-hidden">Digit
|
||||
3</label>
|
||||
<input type="text"
|
||||
class="form-control form-control-lg bg-light border-light text-center"
|
||||
onkeyup="moveToNext(3, event)" maxLength="1"
|
||||
id="digit3-input">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-3">
|
||||
<div class="mb-3">
|
||||
<label for="digit4-input" class="visually-hidden">Digit
|
||||
4</label>
|
||||
<input type="text"
|
||||
class="form-control form-control-lg bg-light border-light text-center"
|
||||
onkeyup="moveToNext(4, event)" maxLength="1"
|
||||
id="digit4-input">
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="button" class="btn btn-secondary w-100">Confirm</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
<p class="mb-0">Didn't receive a code ? <a href="/auth-pass-reset-cover"
|
||||
class="fw-semibold text-primary text-decoration-underline">Resend</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container -->
|
||||
</div>
|
||||
<!-- end auth page content -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">©
|
||||
<script>document.write(new Date().getFullYear())</script> Velzon. Crafted with <i
|
||||
class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end Footer -->
|
||||
</div>
|
||||
<!-- end auth-page-wrapper -->
|
||||
<div th:replace="partials/vendor-scripts :: scripts"></div>
|
||||
|
||||
<script src="/assets/js/pages/two-step-verification.init.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,200 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Area Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Area Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Area Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="area_chart_basic" data-colors='["--vz-success"]' class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Spline Area Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="area_chart_spline" data-colors='["--vz-primary", "--vz-success"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Area Chart - Datetime X - Axis Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="toolbar d-flex align-items-start justify-content-center flex-wrap gap-2">
|
||||
<button type="button" class="btn btn-soft-primary timeline-btn btn-sm" id="one_month">
|
||||
1M
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-primary timeline-btn btn-sm" id="six_months">
|
||||
6M
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-primary timeline-btn btn-sm active"
|
||||
id="one_year">
|
||||
1Y
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-primary timeline-btn btn-sm" id="all">
|
||||
ALL
|
||||
</button>
|
||||
</div>
|
||||
<div id="area_chart_datetime" data-colors='["--vz-info"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Area with Negative Values Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="area_chart_negative" data-colors='["--vz-success", "--vz-info"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Area Chart - Github Style</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="bg-light">
|
||||
<div id="area_chart-months" data-colors='["--vz-danger"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-style d-flex align-items-center my-2">
|
||||
<div class="flex-shrink-0 me-2">
|
||||
<img class="avatar-sm rounded" src="assets/images/users/avatar-2.jpg"
|
||||
data-hovercard-user-id="634573" alt="" />
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<a class="font-size-14 text-dark fw-medium">coder</a>
|
||||
<div class="cmeta text-muted font-size-11">
|
||||
<span class="commits text-dark fw-medium"></span> commits
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-light">
|
||||
<div id="area_chart-years" data-colors='["--vz-success"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Stacked Area Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="area_chart_stacked" data-colors='["--vz-success", "--vz-info", "--vz-light"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Irregular Timeseries Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="area_chart_irregular" data-colors='["--vz-primary", "--vz-warning", "--vz-success"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Area Chart With Null Values Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="area-missing-null-value" data-colors='["--vz-success"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<script src="https://img.themesbrand.com/velzon/apexchart-js/stock-prices.js"></script>
|
||||
<!-- for github style chart -->
|
||||
<script src="https://img.themesbrand.com/velzon/apexchart-js/github-data.js"></script>
|
||||
<!-- for irregular timeseries chart -->
|
||||
<script src="https://img.themesbrand.com/velzon/apexchart-js/irregular-data-series.js"></script>
|
||||
<script src="/assets/libs/moment/moment.js"></script>
|
||||
<!-- linecharts init -->
|
||||
<script src="/assets/js/pages/apexcharts-area.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,185 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Bar Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Bar Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Bar Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="bar_chart" data-colors='["--vz-success"]' class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Custom DataLabels Bar</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="custom_datalabels_bar"
|
||||
data-colors='["--vz-primary", "--vz-secondary", "--vz-success", "--vz-info", "--vz-warning", "--vz-danger", "--vz-dark", "--vz-primary", "--vz-success", "--vz-secondary"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Stacked Bar Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="stacked_bar"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Stacked Bars 100</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="stacked_bar_100"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Bar with Negative Values</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="negative_bars" data-colors='["--vz-primary", "--vz-success"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Bar with Markers</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="bar_markers" data-colors='["--vz-success", "--vz-primary"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Reversed Bar Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="reversed_bars" data-colors='["--vz-info"]' class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Patterned Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="patterned_bars"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Grouped Bar Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="grouped_bar" data-colors='["--vz-primary", "--vz-success"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Bar with Images</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div class="live-preview">
|
||||
<div id="bar_images" class="apex-charts" dir="ltr"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- linecharts init -->
|
||||
<script src="/assets/js/pages/apexcharts-bar.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,79 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Boxplot Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Boxplot Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Box Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="basic_box" data-colors='["--vz-primary", "--vz-info"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Boxplot with Scatter Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="box_plot" data-colors='["--vz-danger", "--vz-info", "--vz-danger", "--vz-primary"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Horizontal BoxPlot</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="box_plot_hori" data-colors='["--vz-light", "--vz-card-bg-custom"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- boxplot init -->
|
||||
<script src="/assets/js/pages/apexcharts-boxplot.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Bubble Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Bubble Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Bubble Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="simple_bubble"
|
||||
data-colors='["--vz-primary", "--vz-info", "--vz-warning", "--vz-success"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">3D Bubble Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="bubble_chart"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- bubble init -->
|
||||
<script src="/assets/js/pages/apexcharts-bubble.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,99 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Candlestick Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Candlestick Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Candlestick Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="basic_candlestick" data-colors='["--vz-success", "--vz-danger"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Candlestick Synced with Brush Chart (Combo)</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="combo_candlestick" data-colors='["--vz-info", "--vz-danger"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
<div id="combo_candlestick_chart" data-colors='["--vz-warning", "--vz-danger"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Category X-Axis</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="category_candlestick" data-colors='["--vz-success", "--vz-danger"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Candlestick with line</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="candlestick_with_line"
|
||||
data-colors='["--vz-success", "--vz-danger", "--vz-info", "--vz-warning"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
<script src="https://apexcharts.com/samples/assets/ohlc.js"></script>
|
||||
<script src="https://img.themesbrand.com/velzon/apexchart-js/dayjs.min.js"></script>
|
||||
<!-- candlestick init -->
|
||||
<script src="/assets/js/pages/apexcharts-candlestick.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,211 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Column Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Column Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Column Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_chart" data-colors='["--vz-danger", "--vz-primary", "--vz-success"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Column with Data Labels</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_chart_datalabel" data-colors='["--vz-success"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Stacked Column Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_stacked"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Stacked Column 100</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_stacked_chart" data-colors='["--vz-primary", "--vz-success", "--vz-warning"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Column with Markers</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_markers" data-colors='["--vz-success", "--vz-primary"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Column with Rotated Labels</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_rotated_labels" data-colors='["--vz-info"]' class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Column with Nagetive Values</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_nagetive_values" data-colors='["--vz-success", "--vz-danger", "--vz-warning"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Range Column Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_range" data-colors='["--vz-primary", "--vz-success"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Dynamic Loaded Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="dynamicloadedchart-wrap" dir="ltr">
|
||||
<div id="chart-year"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-dark", "--vz-info"]'
|
||||
class="apex-charts"></div>
|
||||
<div id="chart-quarter" class="apex-charts"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Distributed Columns Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_distributed"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-dark", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Column with Group Label</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="column_group_labels" data-colors='["--vz-info"]' class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.0/dayjs.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.0/plugin/quarterOfYear.min.js"></script>
|
||||
|
||||
<!-- linecharts init -->
|
||||
<script src="/assets/js/pages/apexcharts-column.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,96 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Heatmap Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Heatmap Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Heatmap Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div class="live-preview">
|
||||
<div id="basic_heatmap" data-colors='["--vz-success", "--vz-card-bg-custom"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Heatmap - Multiple Series</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="multiple_heatmap"
|
||||
data-colors='["--vz-primary", "--vz-secondary", "--vz-success", "--vz-info", "--vz-warning", "--vz-danger", "--vz-dark", "--vz-primary", "--vz-card-bg-custom"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Heatmap Color Range</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="color_heatmap"
|
||||
data-colors='["--vz-info", "--vz-success", "--vz-primary", "--vz-warning"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Heatmap - Range Without Shades</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="shades_heatmap" data-colors='["--vz-info", "--vz-primary"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- heatmap init -->
|
||||
<script src="/assets/js/pages/apexcharts-heatmap.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,214 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Line Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Line Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Line Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_basic" data-colors='["--vz-primary"]' class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Zoomable Timeseries</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_zoomable" data-colors='["--vz-success"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Line with Data Labels</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_datalabel" data-colors='["--vz-primary", "--vz-success"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Dashed Line</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_dashed" data-colors='["--vz-primary", "--vz-danger", "--vz-success"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Line with Annotations</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_annotations" data-colors='["--vz-primary"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Brush Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="brushchart_line2" data-colors='["--vz-danger"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
<div id="brushchart_line" data-colors='["--vz-info"]' class="apex-charts" dir="ltr"></div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Stepline Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_stepline" data-colors='["--vz-success"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Gradient Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_gradient" data-colors='["--vz-success"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Missing Data/ Null Value Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_missing_data" data-colors='["--vz-primary", "--vz-danger", "--vz-success"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Realtimes Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_chart_realtime" data-colors='["--vz-success"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Syncing Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="chart-syncing-line" data-colors='["--vz-primary"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
<div id="chart-syncing-line2" data-colors='["--vz-warning"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
<div id="chart-syncing-area" data-colors='["--vz-success"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<script src="https://img.themesbrand.com/velzon/apexchart-js/stock-prices.js"></script>
|
||||
|
||||
<!-- linecharts init -->
|
||||
<script src="/assets/js/pages/apexcharts-line.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,92 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Mixed Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Mixed Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Line & Column Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_column_chart" data-colors='["--vz-primary", "--vz-success"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Multiple Y-Axis Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="multi_chart" data-colors='["--vz-primary", "--vz-info", "--vz-success"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Line & Area Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_area_chart" data-colors='["--vz-primary", "--vz-success"]' class="apex-charts"
|
||||
dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Line, Column & Area Charts</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="line_area_charts" data-colors='["--vz-primary", "--vz-success", "--vz-danger"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- linecharts init -->
|
||||
<script src="/assets/js/pages/apexcharts-mixed.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,168 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Pie Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Pie Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Simple Pie Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="simple_pie_chart"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Simple Donut Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="simple_dount_chart"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Updating Donut Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="updating_donut_chart"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
|
||||
<div class="d-flex align-items-start flex-wrap gap-2 justify-content-center mt-4">
|
||||
<button id="add" class="btn btn-light btn-sm">
|
||||
+ ADD
|
||||
</button>
|
||||
|
||||
<button id="remove" class="btn btn-light btn-sm">
|
||||
- REMOVE
|
||||
</button>
|
||||
|
||||
<button id="randomize" class="btn btn-light btn-sm">
|
||||
RANDOMIZE
|
||||
</button>
|
||||
|
||||
<button id="reset" class="btn btn-light btn-sm">
|
||||
RESET
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Monochrome Pie Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="monochrome_pie_chart" data-colors='["--vz-primary"]' class="apex-charts" dir="ltr">
|
||||
</div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Gradient Donut Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="gradient_chart"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Patterned Donut Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="pattern_chart"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Pie Chart with Image Fill</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="image_pie_chart"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-info"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- piecharts init -->
|
||||
<script src="/assets/js/pages/apexcharts-pie.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,63 +0,0 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
layout:decorate="~{layout}">
|
||||
|
||||
<th:block layout:fragment="pagetitle">
|
||||
<!--page title-->
|
||||
<div th:replace="partials/title-meta :: title-meta('Apex Polararea Charts')"></div>
|
||||
</th:block>
|
||||
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
<!-- start page title -->
|
||||
<div th:replace="partials/page-title :: page-title('Polararea Charts','Apexcharts')"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Polararea Chart</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="basic_polar_area"
|
||||
data-colors='["--vz-primary", "--vz-success", "--vz-warning","--vz-danger", "--vz-info", "--vz-success", "--vz-primary", "--vz-dark", "--vz-secondary"]'
|
||||
class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">PolarArea Monochrome</h4>
|
||||
</div><!-- end card header -->
|
||||
|
||||
<div class="card-body">
|
||||
<div id="monochrome_polar_area" class="apex-charts" dir="ltr"></div>
|
||||
</div><!-- end card-body -->
|
||||
</div><!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="modal">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="pagejs">
|
||||
<!-- apexcharts -->
|
||||
<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>
|
||||
|
||||
<!-- polararea charts init -->
|
||||
<script src="/assets/js/pages/apexcharts-polararea.init.js"></script>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user