PNG %k25u25%fgd5n! /home/mkuwqnjx/www/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Forexo - Admin & Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Icons -->
<link href="css/materialdesignicons.min.css" rel="stylesheet" type="text/css" />
<!-- Custom Css -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="sidenav shadow">
<div class="text-center pt-0 pt-lg-3 pb-0 pb-lg-3">
<div class="d-none d-lg-inline-block">
<a class="logo text-uppercase" href="#">
<img src="images/logo-sm.png" alt="logo" height="26">
<img src="images/logo-light.png" alt="logo" height="16">
</a>
</div>
</div>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-custom text-white sticky">
<div class="container">
<a class="mobile-re text-uppercase d-inline-block d-lg-none" href="#">
<img src="images/logo-sm.png" alt="logo" height="26">
<img src="images/logo-light.png" alt="logo" height="16"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="mdi mdi-menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="#Introduction"><i class="mdi mdi-account-circle-outline mr-2"></i>Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Structure"><i class="mdi mdi-sitemap mr-2"></i>Structure</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Installation"><i class="mdi mdi-language-css3 mr-2"></i>Installation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Javascript"><i class="mdi mdi-language-javascript mr-2"></i>Javascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Themes"><i class="mdi mdi-language-javascript mr-2"></i>Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Credits"><i class="mdi mdi-cash mr-2"></i>Credits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Support"><i class="mdi mdi-headset mr-2"></i>Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Change_Log"><i class="mdi mdi-update mr-2"></i>Change Log</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END-->
</div>
<div class="main">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="justify-content-center mx-auto">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="text-dark font-weight-bold">Forexo</span>
<small class="text-dark font-weight-semibold">- Documentation</small>
<span class="badge badge-danger">v1.0.0</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Introduction START-->
<section class="bg-home" id="Introduction">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="my-5 ">
<h5 class="text-center">Thank you very much for your purchase!</h5>
<div class="alert alert-success alert-dismissable mt-5">
<p class="mb-0">If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="header-title">Introduction</h4>
<hr class="hr-dashed">
<p>Forexo is a Bootstrap 5 admin dashboard and multipurpose application ui kit.
It is fully responsive and included awesome features to help build web applications fast and easy.
The tones of well designed and developed layouts, components, elements, widgets and application pages allows you
to create any saas based application, custom admin panel or dashboard application.
The clean and flexible code enable you to easily customize it.
</p>
<p>
You are important for us and so please feel free to get back to me with any question or feedback.
</p>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
<!-- Introduction END-->
<!-- Structure -->
<section class="section-sm" id="Structure">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Structure</h4>
<hr class="hr-dashed">
<p>I have tried my best to have standards and modular structure while developing the theme. Following sections are explaining the theme File & Folder, structure, html file struture and plugins.</p>
<div class="row p-t-20">
<div class="col-sm-12">
<h4 class="sub-title">File & Folder Structure</h4>
<hr class="hr-dashed">
<pre class="prettyprint mb-0">
Theme Directory
Forexo/
│
├── dist/
│ └── theme
├── src/
│ ├── assets/
│ │ │
│ │ ├── fonts/
│ │ │ └── All fonts.
│ │ │
│ │ ├── images/
│ │ │ └── images
│ │ │
│ │ ├── js/
│ │ │ └── All js
│ │ │
│ │ └── scss/
│ │ └── All scss files
│ │
│ ├── partials
│ │ │
│ │ └── endbar.html
│ │ └── footer.html
│ │ └── head-css.html
│ │ └── html.html
│ │ └── startbar.html
│ │ └── title-meta.html
│ │ └── topbar.html
│ │ └── vendorjs.html
│ │
│ │
│ └── All HTML files.
│
├── gulpfile.js
│
└── package.json
</pre>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
<!-- Structure -->
<!-- SCSS And CSS Start -->
<section class="section-sm" id="Installation">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Installation</h4>
<hr class="hr-dashed">
<div class="pt-2">
<p class="pt-2">We are using <a href="https://gulpjs.com/" target="_blank">gulp</a> which allows to easily compilation of scss to csss.
In case if you don't know - Gulp is a gulp is a toolkit for automating
painful or time-consuming tasks in development workflow, so you can stop messing around and build
something. You can read it more about it <a href="https://gulpjs.com/" target="_blank">here</a></p>
<h5 class="pt-3">Prerequisites</h5>
<p>Please follow below steps to install and setup all prerequisites:</p>
<ul>
<li><strong>Nodejs</strong>
<p>Make sure to have the <a href="https://nodejs.org/" target="_blank">Node.js</a> installed
& running in your computer. If you already have installed nodejs on your computer, you
can skip this step</p>
</li>
<li><strong>Gulp</strong>
<p>Make sure to have the <a href="https://gulpjs.com/" target="_blank">Gulp</a> installed &
running in your computer. If you already have installed gulp on your computer, you can skip
this step. In order to install, just run command <code>npm install -g gulp</code> from
your terminal.</p>
</li>
<li><strong>Git</strong>
<p>Make sure to have the <a href="https://git-scm.com/" target="_blank">Git</a> installed &
running in your computer. If you already have installed git on your computer, you can skip
this step</p>
</li>
</ul>
<p>To setup, follow below mentioned steps:</p>
<ul>
<li><strong>Install Prerequisites</strong>
<p>Make sure to have all above prerequisites installed & running in your computer</p>
</li>
<li><strong>Install Dependencies</strong>
<p>Open your terminal, go to your folder and enter the command <code>npm install</code>. This
would install all required dependencies in <code>node_modules</code> folder.</p>
</li>
</ul>
<p class="mt-4">After you finished with above steps, you can run the command to compile scss into css:
<code>gulp</code>
</p>
</div>
<h5 class="pt-3">SCSS & CSS</h5>
<p> Forexo comes with power of SCSS. The css files can be generated from scss by simply following below steps:</p>
<p class="pt-3">Following are the stylesheet files:</p>
<table class="table table-bordered m-0">
<thead>
<tr>
<th style="width: 20%;"><i class="ti-file"></i> File</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>bootstrap.min.css</code>
</td>
<td>
Forexo uses the bootstrap v5.3.3. The core bootstrap
file is being used in all the pages.
</td>
</tr>
<tr>
<td>
<code>icons.css</code>
</td>
<td>
Combines various font icons. You should remove the fonts
you don't plan to use from this file and recompile it.
</td>
</tr>
<tr>
<td>
<code>app.css</code>
</td>
<td>
The main stylesheet file, it's being generated from scss
and contains all the css styles combined.
</td>
</tr>
</tbody>
</table>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
<!-- SCSS And CSS End -->
<!-- Javascript start -->
<section class="section-sm" id="Javascript">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Javascript</h4>
<hr class="hr-dashed">
<p class="m-t-20">
Forexo uses,Javascript Bootstrap JS framework(at its core) and some of the
third-party plugins. There are may more third party plugin which you can
use according to your needs. The css is already containing matching
style for these plugins so you will not need to do anything around it.
</p>
<p>They are explained below: </p>
<table class="table table-bordered m-0">
<thead>
<tr>
<th style="width: 20%;"><i class="ti-file"></i> File</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>bootstrap.bundle.min.js</code>,
<code>simplebar</code>, etc.
<!-- TODO -->
</td>
<td>
These files are used at core of the theme.
</td>
</tr>
<tr>
<td>
<code>app.js</code>
</td>
<td>
This is a main js file. It contains the custom JS code
needed for features including
layout, sidebar, etc.
</td>
</tr>
<tr>
<td>
<code>pages/*.js</code>
</td>
<td>
These are the files containing pages specific code. They are
mainly used for demo purpose.
</td>
</tr>
<tr>
<td>
<code>plugins/**.js</code>
</td>
<td>
All supported and integrated third-party plugins are
included in here.
</td>
</tr>
</tbody>
</table>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
<!-- Javascript end -->
<!-- Themes start -->
<section class="section-sm" id="Themes">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Themes</h4>
<hr class="hr-dashed">
<p class="m-t-20">
Forexo uses jQuery, Bootstrap JS framework(at its core) and some of the
third-party plugins. There are may more third party plugin which you can
use according to your needs. The css is already containing matching
style for these plugins so you will not need to do anything around it.
</p>
<p>They are explained below: </p>
<table class="table table-bordered m-0">
<thead>
<tr>
<th style="width: 20%;"><i class="ti-file"></i> Themes</th>
<th>Changes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>Drak version</code>
</td>
<td>
Only change attributes <code>data-startbar="dark"</code> and <code>data-bs-theme="dark"</code> in <code>html</code> tag and compile code set to dark theme.
</td>
</tr>
<tr>
<td>
<code>Sidebar Light</code>
</td>
<td>
Only change attribute <code>data-startbar="light"</code> in <code>html</code> tag and compile code set to light sidebar.
</td>
</tr>
</tbody>
</table>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
<!-- Themes end -->
<!-- Credits Start -->
<section class="section-sm" id="Credits">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Credits & Official Documentation</h4>
<p>I've used the following resources as listed. These are some awesome creation and I am really thankful to the respective community.</p>
<hr class="hr-dashed">
<ul class="">
<li><a href="https://getbootstrap.com/">Bootstrap</a></li>
<li><a href="https://github.com/miniMAC/magic">Magic</a></li>
<li><a href="https://github.com/apexcharts/apexcharts.js">Apex Chart</a></li>
<li><a href="https://chartjs.org/">Chartjs</a></li>
<li><a href="https://clipboardjs.com/">Clipboard</a></li>
<li><a href="https://github.com/fengyuanchen/cropper">Cropper</a></li>
<li><a href="https://arshaw.com/fullcalendar/">Full Calendar</a></li>
<li><a href="https://github.com/bevacqua/dragula">Dragula</a></li>
<li><a href="https://hpneo.github.io/gmaps/">Gmaps</a></li>
<li><a href="https://github.com/Leaflet/Leaflet">Leaflet</a></li>
<li><a href="https://github.com/themustafaomar/jsvectormap">Vector Maps</a></li>
<li><a href="https://github.com/toorshia/justgage">Justgage</a></li>
<li><a href="https://github.com/DmitryBaranovskiy/raphael">Raphael</a></li>
<li><a href="https://github.com/moment/moment">Moment</a></li>
<li><a href="https://github.com/LunarLogic/starability">Rating</a></li>
<li><a href="https://github.com/Mobius1/Selectr">Select</a></li>
<li><a href="https://github.com/sweetalert2/sweetalert2">Sweet-Alert2</a></li>
<li><a href="https://github.com/tinymce/tinymce">Tinymce</a></li>
<li><a href="https://github.com/nhn/tui.chart">Toast UI Chart </a></li>
<li><a href="https://github.com/midzer/tobii">Tobii</a></li>
<li><a href="https://github.com/vakata/jstree">JsTree</a></li>
<li><a href="https://github.com/leongersen/noUiSlider">noUiSlider</a></li>
<li><a href="https://uppy.io/docs/">Uppy</a></li>
<li><a href="https://fontawesome.com/search?m=free&o=r">Fontawesome</a></li>
<li><a href="https://icons8.com/line-awesome">Line awesome</a></li>
<li><a href="https://icofont.com/">Icofont</a></li>
<li><a href="https://iconoir.com/">Iconoir</a></li>
</ul>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
<!-- Credits End -->
<!-- Support start -->
<section class="section-sm" id="Support">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Support</h4>
<hr class="hr-dashed">
<p class="mt-4">
Once again thank you for purchasing the theme. I am always avaialble to help you. If you have any suggestion or feature to make it more better, I am requesting you to contact me, I'll try my best to add them in future updates.
</p>
<p>
Best,
</p>
<p class="text-primary">
- <strong>Mannat-themes</strong>
</p>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
<!-- Support end -->
<!-- Change_Log start -->
<section class="section-sm" id="Change_Log">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Change Log</h4>
<hr class="hr-dashed">
<p style="text-decoration: underline; font-weight: 900;"><strong>Version 1.0.0 <small>- 27 December 2024</small></strong></p>
<ul>
<li>
Initial released
</li>
</ul>
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
<!-- Change_Log end -->
<!-- Footer Start -->
<footer class="footer bg-light mt-4">
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="text-center">
<p class="mb-0">© 2024 <span class="text-custom">Forexo</span>. Design by Mannat-Themes.</p>
</div>
</div>
</div>
</div><!--end container-->
</footer>
<!-- Footer End -->
<!-- JAVASCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrollspy.min.js"></script>
<!-- Custom -->
<script src="js/app.js"></script>
</div>
</body>
</html>