480 lines
16 KiB
HTML
480 lines
16 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<title>
|
|
Page title
|
|
</title>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"/>
|
|
<link href="/static/bulma.min.css" rel="stylesheet"/>
|
|
<link href="shuffle-for-bulma.png" rel="icon" sizes="32x32" type="image/png"/>
|
|
<script src="/static/main.js">
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<section>
|
|
<nav class="navbar has-background-dark is-hidden-desktop">
|
|
<div class="navbar-brand is-align-items-center">
|
|
<a class="navbar-item" href="#">
|
|
<img alt="alt" class="image" src="/static/artemis-logo.svg" width="auto"/>
|
|
</a>
|
|
<button aria-expanded="false" class="navbar-burger navbar-menu-open has-text-white" role="button">
|
|
<span aria-hidden="true">
|
|
</span>
|
|
<span aria-hidden="true">
|
|
</span>
|
|
<span aria-hidden="true">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div class="navbar-side is-hidden-touch is-relative" data-side-class="is-hidden-touch" style="z-index: 9999;">
|
|
<div class="navbar-backdrop is-hidden-desktop is-fixed is-top-0 is-left-0 is-bottom-0 is-right-0 has-background-dark" style="opacity: .5">
|
|
</div>
|
|
<div class="is-fixed is-top-0 is-left-0 is-bottom-0 has-mw-xs has-background-dark pt-5" style="width: 80%; height: 100%; overflow-y: auto; overflow-x: hidden;">
|
|
<div class="px-5 pb-2">
|
|
<a href="#">
|
|
<img alt="alt" class="image" src="/static/artemis-logo.svg" width="auto"/>
|
|
</a>
|
|
</div>
|
|
<aside class="menu py-5 px-5 has-background-dark">
|
|
<p class="menu-label mb-4 is-size-7">
|
|
Main
|
|
</p>
|
|
<ul class="mb-5 menu-list is-size-6">
|
|
<li>
|
|
<a class="py-3 is-active is-flex is-align-items-center" href="#">
|
|
{% include 'svgs/gauge_1.svg' %}
|
|
<span class="mr-auto">
|
|
Dashboard
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/world_1.svg' %}
|
|
<span class="mr-auto">
|
|
Discover
|
|
</span>
|
|
<div class="is-inline-flex has-background-primary has-text-white is-size-7 is-justify-content-center is-align-items-center" style="width: 24px; height: 24px; border-radius: 50% !important;">
|
|
4
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/person_1.svg' %}
|
|
<span class="mr-auto">
|
|
Users
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/book_1.svg' %}
|
|
<span class="mr-auto">
|
|
Documents
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/squares.svg' %}
|
|
<span class="mr-auto">
|
|
Applications
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/page_1.svg' %}
|
|
<span class="mr-auto">
|
|
Pages
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<p class="menu-label mb-4 is-size-7" style="font-size: 12px;">
|
|
Secondary
|
|
</p>
|
|
<ul class="mb-6 menu-list is-size-6">
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/question_1.svg' %}
|
|
<span>
|
|
Support Center
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/folder_1.svg' %}
|
|
<span>
|
|
Inbox
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white">
|
|
{% include 'svgs/folder2_.svg' %}
|
|
<span>
|
|
File Manager
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white">
|
|
{% include 'svgs/list_1.svg' %}
|
|
<span>
|
|
Data List
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="mb-2 menu-list is-size-6">
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/settings_1.svg' %}
|
|
<span>
|
|
Settings
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/exit_1.svg' %}
|
|
<span>
|
|
Log Out
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
<div class="ml-0-touch" style="margin-left: 320px">
|
|
<section class="mb-0">
|
|
<nav class="navbar has-background-dark is-align-items-center">
|
|
<div class="navbar-brand is-align-items-center">
|
|
<a class="navbar-item" href="#">
|
|
</a>
|
|
<button aria-expanded="false" class="navbar-burger navbar-menu-open has-text-white" role="button">
|
|
<span aria-hidden="true">
|
|
</span>
|
|
<span aria-hidden="true">
|
|
</span>
|
|
<span aria-hidden="true">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="navbar-menu ml-5">
|
|
<div class="navbar-start">
|
|
<a class="navbar-item mr-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/gauge_2.svg' %}
|
|
<span class="is-size-6">
|
|
Dashboard
|
|
</span>
|
|
</a>
|
|
<a class="navbar-item mr-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/world_2.svg' %}
|
|
<span class="is-size-6">
|
|
Discover
|
|
</span>
|
|
</a>
|
|
<a class="navbar-item mr-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/person_2.svg' %}
|
|
<span class="is-size-6">
|
|
Users
|
|
</span>
|
|
</a>
|
|
<a class="navbar-item mr-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/book_2.svg' %}
|
|
<span class="is-size-6">
|
|
Documents
|
|
</span>
|
|
</a>
|
|
<a class="navbar-item is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/square_2.svg' %}
|
|
<span class="is-size-6">
|
|
Applications
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<a class="navbar-item has-text-grey-dark" href="#">
|
|
{% include 'svgs/popout_1.svg' %}
|
|
</a>
|
|
<a class="navbar-item has-text-grey-dark" href="#">
|
|
{% include 'svgs/bell_1.svg' %}
|
|
</a>
|
|
<div class="navbar-item">
|
|
<button class="button is-dark p-0 is-flex is-align-items-center has-text-weight-normal">
|
|
<div class="mr-3">
|
|
<p class="has-text-white is-size-6 mb-0">
|
|
Thomas Brown
|
|
</p>
|
|
<p class="is-size-6 has-text-grey-dark mb-0">
|
|
Developer
|
|
</p>
|
|
</div>
|
|
<div class="mr-2">
|
|
<img alt="alt" class="image is-rounded is-32x32 is-cover" src="/static/photo-1568602471122-7832951cc4c5" style="border-radius: 50% !important;"/>
|
|
</div>
|
|
<span>
|
|
{% include 'svgs/down_1.svg' %}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="navbar-side is-hidden is-relative" style="z-index: 9999;">
|
|
<div class="navbar-backdrop is-fixed is-top-0 is-left-0 is-bottom-0 is-right-0 has-background-dark" style="opacity: .5">
|
|
</div>
|
|
<div class="is-fixed is-top-0 is-left-0 is-bottom-0 has-mw-xs has-background-dark pt-5" style="width: 80%; height: 100%; overflow-y: auto; overflow-x: hidden;">
|
|
<div class="px-5 pb-2">
|
|
<a href="#">
|
|
<img alt="alt" class="image" src="/static/artemis-logo.svg" width="auto"/>
|
|
</a>
|
|
</div>
|
|
<aside class="menu py-5 px-5 has-background-dark">
|
|
<p class="menu-label is-size-7">
|
|
Main
|
|
</p>
|
|
<ul class="mb-6 menu-list is-size-6">
|
|
<li>
|
|
<a class="py-3 is-active is-flex is-align-items-center" href="#">
|
|
{% include 'svgs/gauge_1.svg' %}
|
|
<span class="mr-auto">
|
|
Dashboard
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/world_1.svg' %}
|
|
<span class="mr-auto">
|
|
Discover
|
|
</span>
|
|
<div class="is-inline-flex has-background-primary has-text-white is-size-7 is-justify-content-center is-align-items-center" style="width: 24px; height: 24px; border-radius: 50% !important;">
|
|
4
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/person_1.svg' %}
|
|
<span class="mr-auto">
|
|
Users
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/book_1.svg' %}
|
|
<span class="mr-auto">
|
|
Documents
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/squares.svg' %}
|
|
<span class="mr-auto">
|
|
Applications
|
|
</span>
|
|
{% include 'svgs/empty_1.svg' %}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<p class="menu-label is-size-7" style="font-size: 12px;">
|
|
Secondary
|
|
</p>
|
|
<ul class="mb-6 menu-list is-size-6">
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/question_1.svg' %}
|
|
<span>
|
|
Support Center
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/folder_1.svg' %}
|
|
<span>
|
|
Inbox
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white">
|
|
{% include 'svgs/folder2_.svg' %}
|
|
<span>
|
|
File Manager
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white">
|
|
{% include 'svgs/list_1.svg' %}
|
|
<span>
|
|
Data List
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="mb-6 menu-list is-size-6">
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/settings_1.svg' %}
|
|
<span>
|
|
Settings
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
|
|
{% include 'svgs/exit_1.svg' %}
|
|
<span>
|
|
Log Out
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="columns is-multiline">
|
|
<div class="column is-6">
|
|
<div class="box">
|
|
<div class="mb-3 is-flex is-justify-content-space-between is-align-items-center">
|
|
<h3 class="is-size-5 has-text-grey">
|
|
Total Profit
|
|
</h3>
|
|
<button class="button is-ghost has-text-grey-light">
|
|
{% include 'svgs/empty_3.svg' %}
|
|
</button>
|
|
</div>
|
|
<div class="mb-3 is-flex is-align-items-center">
|
|
<h2 class="is-size-4-mobile is-size-3 has-text-weight-bold mr-2">
|
|
$124,563.00
|
|
</h2>
|
|
<span class="tag is-success">
|
|
+6.9%
|
|
</span>
|
|
</div>
|
|
<div class="mb-2 pt-1 is-relative is-rounded has-background-primary-light">
|
|
<div class="is-absolute is-top-0 is-left-0 has-background-primary is-rounded is-covered" style="height: 100%; width: 35%;">
|
|
</div>
|
|
</div>
|
|
<p class="is-size-7 has-text-grey-light">
|
|
Yearly Goal
|
|
</p>
|
|
</div>
|
|
<div class="box">
|
|
<div class="mb-3 is-flex is-justify-content-space-between is-align-items-center">
|
|
<h3 class="is-size-5 has-text-grey">
|
|
New Users
|
|
</h3>
|
|
<button class="button is-ghost has-text-grey-light">
|
|
{% include 'svgs/empty_3.svg' %}
|
|
</button>
|
|
</div>
|
|
<div class="mb-3 is-flex is-align-items-center">
|
|
<h2 class="is-size-4-mobile is-size-3 has-text-weight-bold mr-2">
|
|
94.43%
|
|
</h2>
|
|
<span class="tag is-success">
|
|
+6.9%
|
|
</span>
|
|
</div>
|
|
<div class="chart" data-type="columns-stacked">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6">
|
|
<div class="box px-0 pb-0 is-relative">
|
|
<div class="is-flex-direction-column">
|
|
<div class="px-5 pb-5 is-flex is-justify-content-space-between is-align-items-center" style="border-bottom: 1px solid #E1E4E8;">
|
|
<h4 class="title mb-0 is-size-4">
|
|
Balance
|
|
</h4>
|
|
<div class="select is-small">
|
|
<select name="name">
|
|
<option value="1">
|
|
Monthly
|
|
</option>
|
|
<option value="1">
|
|
Yearly
|
|
</option>
|
|
<option value="1">
|
|
Weekly
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="px-5 py-5">
|
|
<div class="columns is-multiline">
|
|
<div class="column is-6">
|
|
<div class="p-4 is-rounded" style="border: 1px solid #E1E4E8;">
|
|
<span class="heading has-text-grey" style="font-size: 12px;">
|
|
Earnings
|
|
</span>
|
|
<div class="is-flex is-align-items-center">
|
|
<h3 class="is-size-4-mobile is-size-3 has-text-weight-bold mr-2">
|
|
43.41%
|
|
</h3>
|
|
<span class="tag is-success">
|
|
+2.5%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6">
|
|
<div class="p-4 is-rounded" style="border: 1px solid #E1E4E8;">
|
|
<span class="heading has-text-grey">
|
|
Sales Value
|
|
</span>
|
|
<div class="is-flex is-align-items-center">
|
|
<h3 class="is-size-4-mobile is-size-3 has-text-weight-bold mr-2">
|
|
$95,422
|
|
</h3>
|
|
<span class="tag is-success">
|
|
+13.5%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto chart" data-type="area">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts">
|
|
</script>
|
|
<script src="/static/charts-demo.js">
|
|
</script>
|
|
</html>
|