freeflowuniverse/heroweb
27
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity
0fdbc617f7
heroweb/poc/out/index.html
despiegk 0fdbc617f7 ...
2024-09-01 20:00:13 +02:00

481 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE 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&amp;display=swap" rel="stylesheet"/>
<link href="static/css/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 class="">
<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 'svg/gauge_white.svg' %}
<span class="mr-auto">
Dashboard
</span>
{% include 'svg/blank.svg' %}
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/world_black.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 'svg/person_black.svg' %}
<span class="mr-auto">
Users
</span>
{% include 'svg/blank.svg' %}
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/book_black.svg' %}
<span class="mr-auto">
Documents
</span>
{% include 'svg/blank.svg' %}
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/squares_black.svg' %}
<span class="mr-auto">
Applications
</span>
{% include 'svg/blank.svg' %}
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/page_black.svg' %}
<span class="mr-auto">
Pages
</span>
{% include 'svg/blank.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 'svg/question_black.svg' %}
<span>
Support Center
</span>
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/drawer_black.svg' %}
<span>
Inbox
</span>
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white">
{% include 'svg/folder_black.svg' %}
<span>
File Manager
</span>
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white">
{% include 'svg/list_black.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 'svg/settings_black.svg' %}
<span>
Settings
</span>
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/exit_black.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 'svg/gauge_black.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 'svg/world_2_black.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 'svg/person_2_black.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 'svg/book_2_black.svg' %}
<span class="is-size-6">
Documents
</span>
</a>
<a class="navbar-item is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/squares_2_black.svg' %}
<span class="is-size-6">
Applications
</span>
</a>
</div>
<div class="navbar-end">
<a class="navbar-item has-text-grey-dark" href="#">
{% include 'svg/callout_black.svg' %}
</a>
<a class="navbar-item has-text-grey-dark" href="#">
{% include 'svg/bell_black.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 'svg/down_gray.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 'svg/gauge_white.svg' %}
<span class="mr-auto">
Dashboard
</span>
{% include 'svg/blank.svg' %}
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/world_black.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 'svg/person_black.svg' %}
<span class="mr-auto">
Users
</span>
{% include 'svg/blank.svg' %}
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/book_black.svg' %}
<span class="mr-auto">
Documents
</span>
{% include 'svg/blank.svg' %}
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/squares_black.svg' %}
<span class="mr-auto">
Applications
</span>
{% include 'svg/blank.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 'svg/question_black.svg' %}
<span>
Support Center
</span>
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/drawer_black.svg' %}
<span>
Inbox
</span>
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white">
{% include 'svg/folder_black.svg' %}
<span>
File Manager
</span>
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white">
{% include 'svg/list_black.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 'svg/settings_black.svg' %}
<span>
Settings
</span>
</a>
</li>
<li>
<a class="py-3 is-flex is-align-items-center has-text-white" href="#">
{% include 'svg/exit_black.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 'svg/blank_2.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 'svg/blank_2.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/js/charts-demo.js">
</script>
</html>
Reference in New Issue View Git Blame Copy Permalink