Philipp Dormann
dbc660c48e
All checks were successful
continuous-integration/drone/push Build is passing
1852 lines
120 KiB
Svelte
1852 lines
120 KiB
Svelte
<script>
|
|
import ConversionsChart from './ConversionsChart.svelte';
|
|
</script>
|
|
<div class="wrapper">
|
|
<div class="left-sidebar left-sidebar-1">
|
|
<div class="logo truncate"><a class="flex flex-row items-center justify-start space-x-2"
|
|
href="/"><span>D-board</span></a><button class="ml-auto mr-4 block lg:hidden"></button></div>
|
|
<div class="left-sidebar-title"><span>Applications</span></div>
|
|
<div class="left-sidebar-title"><span>Components</span></div>
|
|
<ul>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path>
|
|
</svg><span class="title">UI Elements</span><svg stroke="currentColor" fill="none" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow" height="1em"
|
|
width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/badges"><span class="title">Badges</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/breadcrumbs"><span class="title">Breadcrumbs</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/buttons"><span class="title">Buttons</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/dropdowns"><span class="title">Dropdowns</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/images"><span class="title">Images</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/lists"><span class="title">Lists</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/progress-bars"><span class="title">Progress
|
|
bars</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/pagination"><span class="title">Pagination</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/tabs"><span class="title">Tabs</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/typography"><span class="title">Typography</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg><span class="title">Forms</span><span
|
|
class="badge badge-circle badge-sm bg-indigo-500 text-white">6</span><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow"
|
|
height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/default-forms"><span class="title">Default
|
|
forms</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/sample-forms"><span class="title">Sample forms</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/sliders"><span class="title">Sliders</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/datepicker"><span class="title">Date picker</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/switches"><span class="title">Switches</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/steps"><span class="title">Form steps</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/validation"><span class="title">Form validation</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
</svg><span class="title">Tables</span><svg stroke="currentColor" fill="none" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow" height="1em"
|
|
width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/default-tables"><span class="title">Default
|
|
tables</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/datatables"><span class="title">Datatables</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg><span class="title">Notifications</span><span
|
|
class="badge badge-circle badge-sm bg-indigo-500 text-white">2</span><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow"
|
|
height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/alerts"><span class="title">Alerts</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/notifications"><span
|
|
class="title">Notifications</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/modals"><span class="title">Modals</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/popovers"><span class="title">Popovers</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/tooltips"><span class="title">Tooltips</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div class="left-sidebar-title"><span>Pages</span></div>
|
|
<ul>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg><span class="title">Authentication</span><span
|
|
class="badge badge-circle badge-sm bg-indigo-500 text-white">7</span><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow"
|
|
height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/contact-us-1"><span class="title">Contact us</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/login-1"><span class="title">Login 1</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/login-2"><span class="title">Login 2</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/login-3"><span class="title">Login 3</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/create-account"><span class="title">Create
|
|
account</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/email-confirmation"><span class="title">Email
|
|
confirmation</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/logout"><span class="title">Logout</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/reset-password"><span class="title">Reset
|
|
password</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/forgot-password"><span class="title">Forgot
|
|
password</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/lock-screen"><span class="title">Lock screen</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/subscribe"><span class="title">Subscribe</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg><span class="title">User</span><svg stroke="currentColor" fill="none" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow" height="1em"
|
|
width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/user-profile"><span class="title">User profile</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/social-feed"><span class="title">Social feed</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg><span class="title">Pages</span><svg stroke="currentColor" fill="none" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow" height="1em"
|
|
width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/support-1"><span class="title">Support</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/empty-page"><span class="title">Empty page</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/terms-of-service"><span class="title">Terms of
|
|
service</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/privacy-policy"><span class="title">Privacy
|
|
policy</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/error-page"><span class="title">Error page</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/coming-soon"><span class="title">Coming soon</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div class="left-sidebar-title"><span>Other</span></div>
|
|
<ul>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
|
|
<path d="M22 12A10 10 0 0 0 12 2v10z"></path>
|
|
</svg><span class="title">Charts</span><span
|
|
class="badge badge-circle badge-sm bg-indigo-500 text-white">4</span><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow"
|
|
height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/bar-charts"><span class="title">Bar charts</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/line-charts"><span class="title">Line and area
|
|
charts</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/pie-charts"><span class="title">Pie and doughnut
|
|
charts</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/other-charts"><span class="title">Other charts</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="l0"><button class="left-sidebar-item hidden-sibling"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect>
|
|
<circle cx="8" cy="12" r="3"></circle>
|
|
</svg><span class="title">Icons</span><svg stroke="currentColor" fill="none" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="ml-auto arrow" height="1em"
|
|
width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg></button>
|
|
<ul>
|
|
<li class="l1"><a class="left-sidebar-item " href="/react-icons"><span class="title">React icons</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
<li class="l1"><a class="left-sidebar-item " href="/country-flags"><span class="title">Country
|
|
flags</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div class="left-sidebar-title"><span>Docs</span></div>
|
|
<ul>
|
|
<li class="l0"><a class="left-sidebar-item " href="/documentation"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
|
|
<line x1="12" y1="17" x2="12" y2="17"></line>
|
|
</svg><span class="title">Documentation</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
<div class="left-sidebar-title"><span>Intro</span></div>
|
|
<ul>
|
|
<li class="l0"><a class="left-sidebar-item " href="/landing"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20" height="20"
|
|
width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
</svg><span class="title">Home page</span></a>
|
|
<ul></ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="main w-full bg-grey-50 text-grey-900 dark:bg-grey-900 dark:text-white">
|
|
<div class="navbar navbar-1 border-b">
|
|
<div class="navbar-inner w-full flex items-center justify-start"><button class="mx-4"><svg stroke="currentColor"
|
|
fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20"
|
|
height="20" width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg></button>
|
|
<form class="w-full max-w-xs mr-2 navbar-search">
|
|
<div class="relative"><input type="search" name="search" placeholder="Search..."
|
|
class="pl-10 pr-5 appearance-none h-10 w-full rounded-full text-sm focus:outline-none"><button
|
|
type="submit" class="absolute top-0 mt-3 left-0 ml-4"><svg stroke="currentColor" fill="none"
|
|
stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"
|
|
class="stroke-current h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg></button></div>
|
|
</form>
|
|
<div class="relative"><button class="btn btn-default btn-icon bg-transparent h-16"><span
|
|
class="mr-2">Explore</span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" class="stroke-current" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 left-0 mt-16 ">
|
|
<div class="dropdown-content w-128 bottom-start">
|
|
<div class="flex flex-row flex-wrap">
|
|
<div class="w-1/2 p-2 dropdown-item">
|
|
<div class="flex flex-row items-center justify-start">
|
|
<div class="flex-shrink-0 w-8"><span
|
|
class="h-8 w-8 bg-blue-500 text-white flex items-center justify-center rounded-full text-lg font-display font-bold">01</span>
|
|
</div>
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">Teams</div>
|
|
<div class="text-xs">Minima quasi sunt.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 p-2 dropdown-item">
|
|
<div class="flex flex-row items-center justify-start">
|
|
<div class="flex-shrink-0 w-8"><span
|
|
class="h-8 w-8 bg-blue-500 text-white flex items-center justify-center rounded-full text-lg font-display font-bold">02</span>
|
|
</div>
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">Blog</div>
|
|
<div class="text-xs">Possimus non dolor.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 p-2 dropdown-item">
|
|
<div class="flex flex-row items-center justify-start">
|
|
<div class="flex-shrink-0 w-8"><span
|
|
class="h-8 w-8 bg-blue-500 text-white flex items-center justify-center rounded-full text-lg font-display font-bold">03</span>
|
|
</div>
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">Meetups</div>
|
|
<div class="text-xs">Cupiditate aliquid magnam.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 p-2 dropdown-item">
|
|
<div class="flex flex-row items-center justify-start">
|
|
<div class="flex-shrink-0 w-8"><span
|
|
class="h-8 w-8 bg-blue-500 text-white flex items-center justify-center rounded-full text-lg font-display font-bold">04</span>
|
|
</div>
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">Advertise with us</div>
|
|
<div class="text-xs">Doloribus modi cum.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 p-2 dropdown-item">
|
|
<div class="flex flex-row items-center justify-start">
|
|
<div class="flex-shrink-0 w-8"><span
|
|
class="h-8 w-8 bg-blue-500 text-white flex items-center justify-center rounded-full text-lg font-display font-bold">05</span>
|
|
</div>
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">Features</div>
|
|
<div class="text-xs">Voluptatum suscipit minima.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 p-2 dropdown-item">
|
|
<div class="flex flex-row items-center justify-start">
|
|
<div class="flex-shrink-0 w-8"><span
|
|
class="h-8 w-8 bg-blue-500 text-white flex items-center justify-center rounded-full text-lg font-display font-bold">06</span>
|
|
</div>
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">Job board</div>
|
|
<div class="text-xs">Magnam quae quia.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><span class="ml-auto"></span>
|
|
<div class="hidden lg:flex relative"><button class="flex items-center justify-center h-16 w-12"><span
|
|
class="text-base flag-icon flag-icon-us"></span></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-16 ">
|
|
<div class="dropdown-content w-64 bottom-start">
|
|
<div class="dropdown-title">Change country</div>
|
|
<div class="flex flex-wrap"><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-br"></span><span>Brasil</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-us"></span><span>USA</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-es"></span><span>España</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-ru"></span><span>Россия</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-cn"></span><span>China</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-in"></span><span>India</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-ca"></span><span>Canada</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-au"></span><span>Australia</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-jp"></span><span>Japan</span></a><a
|
|
class="w-1/2 flex items-center justify-start p-2 text-sm space-x-2 dropdown-item" href="/"><span
|
|
class="text-base flag-icon flag-icon-kr"></span><span>Korea</span></a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:flex relative"><button class="flex items-center justify-center h-16 w-12"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" size="18" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
|
|
</path>
|
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
|
|
<line x1="12" y1="22.08" x2="12" y2="12"></line>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-16 ">
|
|
<div class="dropdown-content w-64 bottom-start">
|
|
<div class="dropdown-title">Apps</div>
|
|
<div class="flex flex-wrap text-center">
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-grey-700" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
</svg><span class="text-xs">Home</span></div>
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-blue-700" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg><span class="text-xs">Account</span></div>
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-orange-500" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg><span class="text-xs">Comments</span></div>
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-green-700" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
|
|
</path>
|
|
</svg><span class="text-xs">Settings</span></div>
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-red-500" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
|
<circle cx="12" cy="10" r="3"></circle>
|
|
</svg><span class="text-xs">Maps</span></div>
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-twitter" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z">
|
|
</path>
|
|
</svg><span class="text-xs">Twitter</span></div>
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-facebook" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
|
|
</svg><span class="text-xs">Facebook</span></div>
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-instagram" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
|
|
<line x1="17.5" y1="6.5" x2="17.5" y2="6.5"></line>
|
|
</svg><span class="text-xs">Instagram</span></div>
|
|
<div class="w-1/3 flex flex-col items-center justify-center h-20 space-y-1 dropdown-item"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-xl text-linkedin" height="1em" width="1em"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
|
|
<rect x="2" y="9" width="4" height="12"></rect>
|
|
<circle cx="4" cy="4" r="2"></circle>
|
|
</svg><span class="text-xs">LinkedIn</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:flex relative"><button class="flex items-center justify-center h-16 w-12 relative"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" size="18" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg><span
|
|
class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white"
|
|
style="top:14px;right:8px">5</span></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-16 ">
|
|
<div class="dropdown-content w-64 bottom-start">
|
|
<div class="dropdown-title">Project status</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-col p-2 dropdown-item">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm font-bold">Mobile app development</div>
|
|
<div class="text-xs whitespace-no-wrap">33
|
|
<!-- -->%
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:33%" class="top-0 left-0 h-1 w-full bg-green-500"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col p-2 dropdown-item">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm font-bold">Deploy github project</div>
|
|
<div class="text-xs whitespace-no-wrap">50
|
|
<!-- -->%
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:50%" class="top-0 left-0 h-1 w-full bg-amber-500"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col p-2 dropdown-item">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm font-bold">Customer development</div>
|
|
<div class="text-xs whitespace-no-wrap">66
|
|
<!-- -->%
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:66%" class="top-0 left-0 h-1 w-full bg-red-500"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col p-2 dropdown-item">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm font-bold">Database backup</div>
|
|
<div class="text-xs whitespace-no-wrap">25
|
|
<!-- -->%
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:25%" class="top-0 left-0 h-1 w-full bg-indigo-500"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col p-2 dropdown-item">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm font-bold">Release version 1.4</div>
|
|
<div class="text-xs whitespace-no-wrap">80
|
|
<!-- -->%
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:80%" class="top-0 left-0 h-1 w-full bg-blue-500"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:flex relative"><button class="flex items-center justify-center h-16 w-12"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" size="18" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-16 ">
|
|
<div class="dropdown-content w-64 bottom-start">
|
|
<div class="flex flex-row flex-wrap">
|
|
<div class="w-full">
|
|
<div class="flex items-center justify-start dropdown-item p-2">
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">5 new sales</div>
|
|
<div class="text-xs">Atque quaerat libero maiores vel.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="flex items-center justify-start dropdown-item p-2">
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">$3.000 in average profits</div>
|
|
<div class="text-xs">Aut aut ullam eum possimus.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="flex items-center justify-start dropdown-item p-2">
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">200 new tweets</div>
|
|
<div class="text-xs">Fugiat praesentium soluta amet non.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="flex items-center justify-start dropdown-item p-2">
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">2 new items</div>
|
|
<div class="text-xs">Fugit eaque molestias et aut.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="flex items-center justify-start dropdown-item p-2">
|
|
<div class="ml-2">
|
|
<div class="text-sm font-bold">51 registered users</div>
|
|
<div class="text-xs">Labore aut voluptas molestias illo.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative"><button class="flex h-16 w-8 rounded-full ml-2 relative"><span
|
|
class="absolute top-0 left-0 pt-4"><img class="h-8 w-8 rounded-full shadow" src="/images/faces/m1.png"
|
|
alt="avatar"><span
|
|
class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white shadow-outline-white"
|
|
style="top:10px;right:-4px">2</span></span></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-16 ">
|
|
<div class="dropdown-content w-48 bottom-end">
|
|
<div class="flex flex-col w-full">
|
|
<ul class="list-none">
|
|
<li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
|
|
href="/"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" size="18" class="stroke-current" height="18"
|
|
width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
<polyline points="22,6 12,13 2,6"></polyline>
|
|
</svg><span class="mx-2">Inbox</span><span
|
|
class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white ml-auto">2</span></a>
|
|
</li>
|
|
<li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
|
|
href="/"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" size="18" class="stroke-current" height="18"
|
|
width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<polygon
|
|
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
|
|
</polygon>
|
|
</svg><span class="mx-2">Messages</span><span
|
|
class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white ml-auto">3</span></a>
|
|
</li>
|
|
<li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
|
|
href="/extras/user-profile"><svg stroke="currentColor" fill="none" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="18"
|
|
class="stroke-current" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg><span class="mx-2">Profile</span></a></li>
|
|
<li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
|
|
href="/pages/logout"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" size="18" class="stroke-current" height="18"
|
|
width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
<polyline points="10 17 15 12 10 7"></polyline>
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
</svg><span class="mx-2">Logout</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><button class="btn-transparent flex items-center justify-center h-16 w-8 mx-4"><svg stroke="currentColor"
|
|
fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="18"
|
|
height="18" width="18" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
|
|
</path>
|
|
</svg></button>
|
|
</div>
|
|
</div>
|
|
<div class="min-h-screen w-full p-4">
|
|
<div class="w-full mb-6 pt-3">
|
|
<div class="flex flex-row items-center justify-between mb-4">
|
|
<div class="flex flex-col">
|
|
<div class="text-xs uppercase font-light text-grey-500">Overview</div>
|
|
<div class="text-xl font-bold">Dashboard</div>
|
|
</div>
|
|
<div class="flex-shrink-0 space-x-2"><button
|
|
class="btn btn-default btn-rounded btn-icon bg-blue-500 hover:bg-blue-600 text-white space-x-1"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current text-white" size="16" height="16" width="16"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg><span>Add widget</span></button></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
|
|
<div class="w-full lg:w-1/4">
|
|
<div
|
|
class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<div class="text-xs uppercase font-light text-grey-500">Users</div>
|
|
<div class="text-xl font-bold">588</div>
|
|
</div><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" size="24" class="stroke-current text-grey-500" height="24" width="24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/4">
|
|
<div
|
|
class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<div class="text-xs uppercase font-light text-grey-500">Sessions</div>
|
|
<div class="text-xl font-bold">435</div>
|
|
</div><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" size="24" class="stroke-current text-grey-500" height="24" width="24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/4">
|
|
<div
|
|
class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<div class="text-xs uppercase font-light text-grey-500">Bounce rate</div>
|
|
<div class="text-xl font-bold">40.5%</div>
|
|
</div><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" size="24" class="stroke-current text-grey-500" height="24" width="24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/4">
|
|
<div
|
|
class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<div class="text-xs uppercase font-light text-grey-500">Session duration</div>
|
|
<div class="text-xl font-bold">1m 24s</div>
|
|
</div><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" size="24" class="stroke-current text-grey-500" height="24" width="24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
|
|
<div class="w-full lg:w-2/3">
|
|
<ConversionsChart />
|
|
</div>
|
|
<div class="w-full lg:w-1/3">
|
|
<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between mb-6">
|
|
<div class="flex flex-col">
|
|
<div class="text-sm font-light text-grey-500">Sessions</div>
|
|
<div class="text-sm font-bold"><span>By device</span></div>
|
|
</div>
|
|
<div class="relative"><button
|
|
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
<circle cx="12" cy="19" r="1"></circle>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
|
<div class="dropdown-content w-48 bottom-start">
|
|
<div class="flex flex-col w-full">
|
|
<ul class="list-none">
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">Today</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This week</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This month</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This year</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row w-full">
|
|
<div style="width:100%;height:240px">
|
|
<div class="recharts-responsive-container" style="width:100%;height:100%">
|
|
<div class="recharts-wrapper"
|
|
style="position: relative; cursor: default; width: 335px; height: 240px;"><svg
|
|
class="recharts-surface" width="335" height="240" viewBox="0 0 335 240" version="1.1">
|
|
<defs>
|
|
<clipPath id="recharts6-clip">
|
|
<rect x="5" y="5" height="211" width="325"></rect>
|
|
</clipPath>
|
|
</defs>
|
|
<g class="recharts-layer recharts-pie">
|
|
<g class="recharts-layer">
|
|
<g class="recharts-layer recharts-pie-sector">
|
|
<path fill="#90caf9" stroke="#fff" class="recharts-sector" d="M 251.9,110.5
|
|
A 84.4,84.4,0,
|
|
0,0,
|
|
88.18994280566933,81.63349990331355
|
|
L 111.11844275284551,89.97879140045987
|
|
A 60,60,0,
|
|
0,1,
|
|
227.5,110.5 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-pie-sector">
|
|
<path fill="#42a5f5" stroke="#fff" class="recharts-sector" d="M 88.18994280566933,81.63349990331355
|
|
A 84.4,84.4,0,
|
|
0,0,
|
|
182.1559061950889,193.6177743542304
|
|
L 177.9188906600158,169.5884651807325
|
|
A 60,60,0,
|
|
0,1,
|
|
111.11844275284551,89.97879140045987 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-pie-sector">
|
|
<path fill="#1e88e5" stroke="#fff" class="recharts-sector" d="M 182.1559061950889,193.6177743542304
|
|
A 84.4,84.4,0,
|
|
0,0,
|
|
251.9,110.50000000000001
|
|
L 227.5,110.50000000000001
|
|
A 60,60,0,
|
|
0,1,
|
|
177.9188906600158,169.5884651807325 Z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<div class="recharts-legend-wrapper"
|
|
style="position: absolute; width: 325px; height: auto; left: 5px; bottom: 5px;">
|
|
<ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: center;">
|
|
<li class="recharts-legend-item legend-item-0"
|
|
style="display: inline-block; margin-right: 10px;"><svg class="recharts-surface" width="14"
|
|
height="14" viewBox="0 0 32 32" version="1.1"
|
|
style="display: inline-block; vertical-align: middle; margin-right: 4px;">
|
|
<path fill="#90caf9" class="recharts-symbols" transform="translate(16, 16)"
|
|
d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0"></path>
|
|
</svg><span class="recharts-legend-item-text">Desktop</span></li>
|
|
<li class="recharts-legend-item legend-item-1"
|
|
style="display: inline-block; margin-right: 10px;"><svg class="recharts-surface" width="14"
|
|
height="14" viewBox="0 0 32 32" version="1.1"
|
|
style="display: inline-block; vertical-align: middle; margin-right: 4px;">
|
|
<path fill="#42a5f5" class="recharts-symbols" transform="translate(16, 16)"
|
|
d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0"></path>
|
|
</svg><span class="recharts-legend-item-text">Mobile</span></li>
|
|
<li class="recharts-legend-item legend-item-2"
|
|
style="display: inline-block; margin-right: 10px;"><svg class="recharts-surface" width="14"
|
|
height="14" viewBox="0 0 32 32" version="1.1"
|
|
style="display: inline-block; vertical-align: middle; margin-right: 4px;">
|
|
<path fill="#1e88e5" class="recharts-symbols" transform="translate(16, 16)"
|
|
d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0"></path>
|
|
</svg><span class="recharts-legend-item-text">Tablet</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="recharts-tooltip-wrapper"
|
|
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px;"></div>
|
|
</div>
|
|
<div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
|
|
<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between mb-6">
|
|
<div class="flex flex-col">
|
|
<div class="text-sm font-light text-grey-500">Users</div>
|
|
<div class="text-sm font-bold"><span>Most important markets</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col w-full">
|
|
<div class="overflow-x-scroll lg:overflow-hidden">
|
|
<table role="table" class="table">
|
|
<thead>
|
|
<tr role="row">
|
|
<th colspan="1" role="columnheader">
|
|
<div class="flex flex-row items-center justify-start whitespace-no-wrap"><span><input
|
|
type="checkbox" title="Toggle All Rows Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></span><span class="ml-auto"></span></div>
|
|
</th>
|
|
<th colspan="1" role="columnheader" title="Toggle SortBy" style="cursor:pointer">
|
|
<div class="flex flex-row items-center justify-start whitespace-no-wrap"><span>Country</span><span
|
|
class="ml-auto"></span></div>
|
|
</th>
|
|
<th colspan="1" role="columnheader" title="Toggle SortBy" style="cursor:pointer">
|
|
<div class="flex flex-row items-center justify-start whitespace-no-wrap"><span>Active
|
|
users</span><span class="ml-auto"></span></div>
|
|
</th>
|
|
<th colspan="1" role="columnheader" title="Toggle SortBy" style="cursor:pointer">
|
|
<div class="flex flex-row items-center justify-start whitespace-no-wrap"><span>Team
|
|
members</span><span class="ml-auto"></span></div>
|
|
</th>
|
|
<th colspan="1" role="columnheader" title="Toggle SortBy" style="cursor:pointer">
|
|
<div class="flex flex-row items-center justify-start whitespace-no-wrap">
|
|
<span>Progress</span><span class="ml-auto"></span>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody role="rowgroup">
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-cn"></span><span class="ml-2">China</span>
|
|
</td>
|
|
<td role="cell"><span>1,377,422,166</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/w5.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w1.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m1.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m8.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:83%" class="top-0 left-0 h-1 w-full bg-indigo-500"></div>
|
|
</div><span class="ml-1 text-grey-500">83
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-in"></span><span class="ml-2">India</span>
|
|
</td>
|
|
<td role="cell"><span>1,295,210,000</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/w9.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w4.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w2.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m6.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:71%" class="top-0 left-0 h-1 w-full bg-teal-500"></div>
|
|
</div><span class="ml-1 text-grey-500">71
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-id"></span><span
|
|
class="ml-2">Indonesia</span></td>
|
|
<td role="cell"><span>258,705,000</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/m6.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w8.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m8.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:45%" class="top-0 left-0 h-1 w-full bg-blue-500"></div>
|
|
</div><span class="ml-1 text-grey-500">45
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-pk"></span><span
|
|
class="ml-2">Pakistan</span></td>
|
|
<td role="cell"><span>194,125,062</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/m2.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m5.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m1.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w5.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:60%" class="top-0 left-0 h-1 w-full bg-teal-500"></div>
|
|
</div><span class="ml-1 text-grey-500">60
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-bd"></span><span
|
|
class="ml-2">Bangladesh</span></td>
|
|
<td role="cell"><span>161,006,790</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/m1.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w1.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m7.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:55%" class="top-0 left-0 h-1 w-full bg-red-500"></div>
|
|
</div><span class="ml-1 text-grey-500">55
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-ru"></span><span class="ml-2">Russian
|
|
Federation</span></td>
|
|
<td role="cell"><span>146,599,183</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/m8.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w8.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m2.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:82%" class="top-0 left-0 h-1 w-full bg-red-500"></div>
|
|
</div><span class="ml-1 text-grey-500">82
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-jp"></span><span class="ml-2">Japan</span>
|
|
</td>
|
|
<td role="cell"><span>126,960,000</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/w6.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w4.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m5.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m2.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:47%" class="top-0 left-0 h-1 w-full bg-red-500"></div>
|
|
</div><span class="ml-1 text-grey-500">47
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-ph"></span><span
|
|
class="ml-2">Philippines</span></td>
|
|
<td role="cell"><span>103,279,800</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/w4.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w1.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m4.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m5.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:70%" class="top-0 left-0 h-1 w-full bg-indigo-500"></div>
|
|
</div><span class="ml-1 text-grey-500">70
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-vn"></span><span class="ml-2">Viet
|
|
Nam</span></td>
|
|
<td role="cell"><span>92,700,000</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/m8.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m6.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m5.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w8.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:45%" class="top-0 left-0 h-1 w-full bg-teal-500"></div>
|
|
</div><span class="ml-1 text-grey-500">45
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="cell"><input type="checkbox" title="Toggle Row Selected" style="cursor:pointer"
|
|
class="form-checkbox h-4 w-4"></td>
|
|
<td role="cell"><span class="text-sm flag-icon flag-icon-de"></span><span
|
|
class="ml-2">Germany</span></td>
|
|
<td role="cell"><span>81,770,900</span></td>
|
|
<td role="cell">
|
|
<div class="flex flex-row items-center justify-start"><img src="/images/faces/m9.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m8.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/w3.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"><img src="/images/faces/m1.png" alt="media"
|
|
class="h-8 w-8 shadow-outline rounded-full -ml-3"></div>
|
|
</td>
|
|
<td role="cell">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:68%" class="top-0 left-0 h-1 w-full bg-teal-500"></div>
|
|
</div><span class="ml-1 text-grey-500">68
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="flex flex-row w-full items-center justify-around lg:justify-between my-4">
|
|
<div class="flex flex-wrap items-center justify-start space-x-2 pagination"><button
|
|
class="btn btn-default bg-transparent hover:bg-grey-200 text-grey-900 dark:text-white">Next</button><button
|
|
class="btn btn-default bg-transparent hover:bg-grey-200 text-grey-900 dark:text-white">Last</button>
|
|
</div><span class="hidden lg:block">Page
|
|
<!-- --> <b>1
|
|
<!-- --> of
|
|
<!-- -->11
|
|
</b>
|
|
</span><select
|
|
class="hidden lg:block form-select text-sm bg-white dark:bg-grey-800 dark:border-grey-800 outline-none shadow-none focus:shadow-none">
|
|
<option selected="" value="10">Show 10</option>
|
|
<option value="25">Show 25</option>
|
|
<option value="50">Show 50</option>
|
|
<option value="100">Show 100</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
|
|
<div class="w-full lg:w-1/2">
|
|
<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between mb-6">
|
|
<div class="flex flex-col">
|
|
<div class="text-sm font-light text-grey-500">Project status</div>
|
|
<div class="text-sm font-bold"><span>This week</span></div>
|
|
</div>
|
|
<div class="relative"><button
|
|
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
<circle cx="12" cy="19" r="1"></circle>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
|
<div class="dropdown-content w-48 bottom-start">
|
|
<div class="flex flex-col w-full">
|
|
<ul class="list-none">
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">Today</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This week</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This month</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This year</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row w-full">
|
|
<div class="w-full mb-4">
|
|
<div class="flex items-center justify-start p-2 space-x-4">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/m1.png" alt="media"
|
|
class="h-8 w-full shadow-lg rounded-full shadow-outline"></div>
|
|
<div class="flex flex-col w-full">
|
|
<div class="text-sm font-bold">Harum quia vel vero id.</div>
|
|
<div class="text-sm">Et odio facere in quis.</div>
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:52%" class="top-0 left-0 h-1 w-full bg-indigo-500"></div>
|
|
</div><span class="text-grey-500 whitespace-no-wrap">52
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-start p-2 space-x-4">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/w2.png" alt="media"
|
|
class="h-8 w-full shadow-lg rounded-full shadow-outline"></div>
|
|
<div class="flex flex-col w-full">
|
|
<div class="text-sm font-bold">Qui itaque omnis distinctio commodi.</div>
|
|
<div class="text-sm">Tempore quis omnis tempore et.</div>
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:54%" class="top-0 left-0 h-1 w-full bg-indigo-500"></div>
|
|
</div><span class="text-grey-500 whitespace-no-wrap">54
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-start p-2 space-x-4">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/w3.png" alt="media"
|
|
class="h-8 w-full shadow-lg rounded-full shadow-outline"></div>
|
|
<div class="flex flex-col w-full">
|
|
<div class="text-sm font-bold">Nemo dolor reiciendis ut et.</div>
|
|
<div class="text-sm">Nisi aut iure et modi.</div>
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:33%" class="top-0 left-0 h-1 w-full bg-amber-500"></div>
|
|
</div><span class="text-grey-500 whitespace-no-wrap">33
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-start p-2 space-x-4">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/w10.png" alt="media"
|
|
class="h-8 w-full shadow-lg rounded-full shadow-outline"></div>
|
|
<div class="flex flex-col w-full">
|
|
<div class="text-sm font-bold">Provident dignissimos sed non quia.</div>
|
|
<div class="text-sm">Odit omnis enim sapiente labore.</div>
|
|
<div class="flex flex-row items-center justify-around">
|
|
<div class="relative flex flex-row w-full text-center text-xs items-center h-1">
|
|
<div style="width:55%" class="top-0 left-0 h-1 w-full bg-red-500"></div>
|
|
</div><span class="text-grey-500 whitespace-no-wrap">55
|
|
<!-- -->%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/2">
|
|
<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between mb-6">
|
|
<div class="flex flex-col">
|
|
<div class="text-sm font-light text-grey-500">Sales</div>
|
|
<div class="text-sm font-bold"><span>This month</span></div>
|
|
</div>
|
|
<div class="relative"><button
|
|
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
<circle cx="12" cy="19" r="1"></circle>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
|
<div class="dropdown-content w-48 bottom-start">
|
|
<div class="flex flex-col w-full">
|
|
<ul class="list-none">
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">Today</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This week</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This month</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This year</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row w-full">
|
|
<div style="width:100%;height:320px">
|
|
<div class="recharts-responsive-container" style="width:100%;height:100%">
|
|
<div class="recharts-wrapper"
|
|
style="position: relative; cursor: default; width: 520px; height: 320px;"><svg
|
|
class="recharts-surface" width="520" height="320" viewBox="0 0 520 320" version="1.1">
|
|
<defs>
|
|
<clipPath id="recharts10-clip">
|
|
<rect x="40" y="46" height="234" width="470"></rect>
|
|
</clipPath>
|
|
</defs>
|
|
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
|
|
<g class="recharts-cartesian-axis-ticks">
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30" x="40"
|
|
y="288" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
|
text-anchor="middle">
|
|
<tspan x="40" dy="0.71em">Jan</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="82.72727272727272" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="82.72727272727272" dy="0.71em">Feb</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="125.45454545454545" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="125.45454545454545" dy="0.71em">Mar</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="168.1818181818182" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="168.1818181818182" dy="0.71em">Apr</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="210.9090909090909" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="210.9090909090909" dy="0.71em">May</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="253.63636363636363" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="253.63636363636363" dy="0.71em">Jun</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="296.3636363636364" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="296.3636363636364" dy="0.71em">Jul</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="339.09090909090907" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="339.09090909090907" dy="0.71em">Aug</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="381.8181818181818" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="381.8181818181818" dy="0.71em">Sep</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="424.54545454545456" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="424.54545454545456" dy="0.71em">Oct</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="467.27272727272725" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="467.27272727272725" dy="0.71em">Nov</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="470" height="30"
|
|
x="507.234375" y="288" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="507.234375" dy="0.71em">Dec</tspan>
|
|
</text></g>
|
|
</g>
|
|
</g>
|
|
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
|
|
<g class="recharts-cartesian-axis-ticks">
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="234" x="32"
|
|
y="280" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
|
text-anchor="end">
|
|
<tspan x="32" dy="0.355em">0</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="234" x="32"
|
|
y="221.5" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
|
<tspan x="32" dy="0.355em">60</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="234" x="32"
|
|
y="163" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
|
text-anchor="end">
|
|
<tspan x="32" dy="0.355em">120</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="234" x="32"
|
|
y="104.5" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
|
<tspan x="32" dy="0.355em">180</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="234" x="32"
|
|
y="46" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
|
text-anchor="end">
|
|
<tspan x="32" dy="0.355em">240</tspan>
|
|
</text></g>
|
|
</g>
|
|
</g>
|
|
<g class="recharts-layer recharts-line">
|
|
<path stroke="#90caf9" stroke-width="2" fill="none" width="470" height="234"
|
|
stroke-dasharray="651.3228149414062px 0px" class="recharts-curve recharts-line-curve"
|
|
d="M40,137.65C54.24242424242424,156.5,68.48484848484848,175.35000000000002,82.72727272727272,176.65C96.96969696969697,177.95,111.2121212121212,178.6,125.45454545454545,178.6C139.6969696969697,178.6,153.93939393939394,133.75,168.1818181818182,133.75C182.42424242424244,133.75,196.66666666666666,146.425,210.9090909090909,146.425C225.15151515151516,146.425,239.39393939393938,99.625,253.63636363636363,99.625C267.8787878787879,99.625,282.1212121212121,117.3375,296.3636363636364,124C310.6060606060606,130.6625,324.8484848484848,139.6,339.09090909090907,139.6C353.3333333333333,139.6,367.57575757575756,102.55000000000001,381.8181818181818,102.55000000000001C396.06060606060606,102.55000000000001,410.3030303030303,161.05,424.54545454545456,161.05C438.7878787878788,161.05,453.030303030303,131.8,467.27272727272725,131.8C481.5151515151515,131.8,495.75757575757575,148.8625,510,165.925">
|
|
</path>
|
|
<g class="recharts-layer recharts-line-dots">
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="40" cy="137.65"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="82.72727272727272" cy="176.65"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="125.45454545454545" cy="178.6"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="168.1818181818182" cy="133.75"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="210.9090909090909" cy="146.425"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="253.63636363636363" cy="99.625"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="296.3636363636364" cy="124"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="339.09090909090907" cy="139.6"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="381.8181818181818" cy="102.55000000000001">
|
|
</circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="424.54545454545456" cy="161.05"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="467.27272727272725" cy="131.8"></circle>
|
|
<circle r="3" stroke="#90caf9" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="510" cy="165.925"></circle>
|
|
</g>
|
|
</g>
|
|
<g class="recharts-layer recharts-line">
|
|
<path stroke="#42a5f5" stroke-width="2" fill="none" width="470" height="234"
|
|
stroke-dasharray="651.0974731445312px 0px" class="recharts-curve recharts-line-curve"
|
|
d="M40,119.125C54.24242424242424,118.6375,68.48484848484848,118.15,82.72727272727272,118.15C96.96969696969697,118.15,111.2121212121212,132.775,125.45454545454545,132.775C139.6969696969697,132.775,153.93939393939394,114.08750000000002,168.1818181818182,108.40000000000002C182.42424242424244,102.71250000000002,196.66666666666666,100.925,210.9090909090909,98.64999999999999C225.15151515151516,96.37499999999999,239.39393939393938,94.75,253.63636363636363,94.75C267.8787878787879,94.75,282.1212121212121,111.325,296.3636363636364,111.325C310.6060606060606,111.325,324.8484848484848,59.65,339.09090909090907,59.65C353.3333333333333,59.65,367.57575757575756,129.85,381.8181818181818,129.85C396.06060606060606,129.85,410.3030303030303,118.96250000000003,424.54545454545456,108.40000000000002C438.7878787878788,97.83750000000002,453.030303030303,66.47500000000001,467.27272727272725,66.47500000000001C481.5151515151515,66.47500000000001,495.75757575757575,99.13750000000002,510,131.8">
|
|
</path>
|
|
<g class="recharts-layer recharts-line-dots">
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="40" cy="119.125"></circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="82.72727272727272" cy="118.15"></circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="125.45454545454545" cy="132.775"></circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="168.1818181818182" cy="108.40000000000002">
|
|
</circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="210.9090909090909" cy="98.64999999999999">
|
|
</circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="253.63636363636363" cy="94.75"></circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="296.3636363636364" cy="111.325"></circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="339.09090909090907" cy="59.65"></circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="381.8181818181818" cy="129.85"></circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="424.54545454545456" cy="108.40000000000002">
|
|
</circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="467.27272727272725" cy="66.47500000000001">
|
|
</circle>
|
|
<circle r="3" stroke="#42a5f5" stroke-width="2" fill="#fff" width="470" height="234"
|
|
class="recharts-dot recharts-line-dot" cx="510" cy="131.8"></circle>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<div class="recharts-legend-wrapper"
|
|
style="position: absolute; width: 500px; height: 36px; left: 10px; top: 10px;">
|
|
<ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: center;">
|
|
<li class="recharts-legend-item legend-item-0"
|
|
style="display: inline-block; margin-right: 10px;"><svg class="recharts-surface" width="14"
|
|
height="14" viewBox="0 0 32 32" version="1.1"
|
|
style="display: inline-block; vertical-align: middle; margin-right: 4px;">
|
|
<path fill="#90caf9" class="recharts-symbols" transform="translate(16, 16)"
|
|
d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0"></path>
|
|
</svg><span class="recharts-legend-item-text">sales</span></li>
|
|
<li class="recharts-legend-item legend-item-1"
|
|
style="display: inline-block; margin-right: 10px;"><svg class="recharts-surface" width="14"
|
|
height="14" viewBox="0 0 32 32" version="1.1"
|
|
style="display: inline-block; vertical-align: middle; margin-right: 4px;">
|
|
<path fill="#42a5f5" class="recharts-symbols" transform="translate(16, 16)"
|
|
d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0"></path>
|
|
</svg><span class="recharts-legend-item-text">conversions</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="recharts-tooltip-wrapper"
|
|
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px;"></div>
|
|
</div>
|
|
<div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
|
|
<div class="w-full lg:w-1/3">
|
|
<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between mb-6">
|
|
<div class="flex flex-col">
|
|
<div class="text-sm font-light text-grey-500">Activities</div>
|
|
<div class="text-sm font-bold"><span>Today</span></div>
|
|
</div>
|
|
<div class="relative"><button
|
|
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
<circle cx="12" cy="19" r="1"></circle>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
|
<div class="dropdown-content w-48 bottom-start">
|
|
<div class="flex flex-col w-full">
|
|
<ul class="list-none">
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">Today</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This week</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This month</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This year</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row w-full">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex relative justify-start items-start">
|
|
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
|
|
<div class="h-full w-1 bg-grey-200 dark:bg-grey-800 pointer-events-none"></div>
|
|
</div>
|
|
<div
|
|
class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center bg-blue-500 text-white relative z-10 font-medium text-sm">
|
|
1</div>
|
|
<div class="flex-grow flex items-start flex-col pb-4">
|
|
<div class="flex items-start justify-start px-4">
|
|
<div class="flex flex-col w-full">
|
|
<div class="text-sm font-bold">Perferendis dignissimos provident saepe in.</div>
|
|
<div class="text-sm">Corporis in est quae exercitationem.</div>
|
|
<div class="text-sm">a few seconds ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex relative justify-start items-start">
|
|
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
|
|
<div class="h-full w-1 bg-grey-200 dark:bg-grey-800 pointer-events-none"></div>
|
|
</div>
|
|
<div
|
|
class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center bg-blue-500 text-white relative z-10 font-medium text-sm">
|
|
2</div>
|
|
<div class="flex-grow flex items-start flex-col pb-4">
|
|
<div class="flex items-start justify-start px-4">
|
|
<div class="flex flex-col w-full">
|
|
<div class="text-sm font-bold">Eos et aut perspiciatis et.</div>
|
|
<div class="text-sm">Hic praesentium veritatis sapiente voluptatem.</div>
|
|
<div class="text-sm">a day ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex relative justify-start items-start">
|
|
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
|
|
<div class="h-full w-1 bg-grey-200 dark:bg-grey-800 pointer-events-none"></div>
|
|
</div>
|
|
<div
|
|
class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center bg-blue-500 text-white relative z-10 font-medium text-sm">
|
|
3</div>
|
|
<div class="flex-grow flex items-start flex-col pb-4">
|
|
<div class="flex items-start justify-start px-4">
|
|
<div class="flex flex-col w-full">
|
|
<div class="text-sm font-bold">Vero voluptatibus est voluptas quas.</div>
|
|
<div class="text-sm">Ut iusto praesentium harum molestias.</div>
|
|
<div class="text-sm">2 days ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex relative justify-start items-start">
|
|
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
|
|
<div class="h-full w-1 bg-grey-200 dark:bg-grey-800 pointer-events-none"></div>
|
|
</div>
|
|
<div
|
|
class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center bg-blue-500 text-white relative z-10 font-medium text-sm">
|
|
4</div>
|
|
<div class="flex-grow flex items-start flex-col pb-4">
|
|
<div class="flex items-start justify-start px-4">
|
|
<div class="flex flex-col w-full">
|
|
<div class="text-sm font-bold">Non maxime fuga nemo officiis.</div>
|
|
<div class="text-sm">Dolore nam laudantium vel voluptatem.</div>
|
|
<div class="text-sm">3 days ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-2/3">
|
|
<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between mb-6">
|
|
<div class="flex flex-col">
|
|
<div class="text-sm font-light text-grey-500">To do</div>
|
|
<div class="text-sm font-bold"><span>In progress</span></div>
|
|
</div>
|
|
<div class="relative"><button
|
|
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
<circle cx="12" cy="19" r="1"></circle>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
|
<div class="dropdown-content w-48 bottom-start">
|
|
<div class="flex flex-col w-full">
|
|
<ul class="list-none">
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">Today</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This week</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This month</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This year</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row w-full">
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row items-center justify-start mb-2 lg:px-2">
|
|
<div class="form-element form-element-inline"><input type="checkbox" name="0"
|
|
class="form-checkbox text-blue-500 h-4 w-4"></div>
|
|
<div class="ml-4 flex items-start justify-start">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/w5.png" alt="media"
|
|
class="h-8 w-full rounded-full"></div>
|
|
<div class="ml-2 ">
|
|
<div class="text-sm font-bold">Laborum assumenda placeat doloribus architecto.</div>
|
|
<div class="text-xs text-grey-500">To do</div><span
|
|
class="uppercase font-bold inline-flex text-center badge-sm bg-red-700 text-red-100 rounded-lg text-2xs px-2 py-0">medium</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-auto mr-1 lg:mr-2 whitespace-no-wrap text-xs text-grey-500">Dec 18</div><button
|
|
class="btn btn-circle"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" size="16" class="stroke-current text-grey-500"
|
|
height="16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg></button>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-start mb-2 lg:px-2">
|
|
<div class="form-element form-element-inline"><input type="checkbox" name="1"
|
|
class="form-checkbox text-blue-500 h-4 w-4"></div>
|
|
<div class="ml-4 flex items-start justify-start">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/w5.png" alt="media"
|
|
class="h-8 w-full rounded-full"></div>
|
|
<div class="ml-2 ">
|
|
<div class="text-sm font-bold">Quis ut magnam provident reiciendis.</div>
|
|
<div class="text-xs text-grey-500">To do</div><span
|
|
class="uppercase font-bold inline-flex text-center badge-sm bg-red-700 text-red-100 rounded-lg text-2xs px-2 py-0">high</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-auto mr-1 lg:mr-2 whitespace-no-wrap text-xs text-grey-500">Dec 17</div><button
|
|
class="btn btn-circle"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" size="16" class="stroke-current text-grey-500"
|
|
height="16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg></button>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-start mb-2 lg:px-2">
|
|
<div class="form-element form-element-inline"><input type="checkbox" name="2"
|
|
class="form-checkbox text-blue-500 h-4 w-4"></div>
|
|
<div class="ml-4 flex items-start justify-start">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/w6.png" alt="media"
|
|
class="h-8 w-full rounded-full"></div>
|
|
<div class="ml-2 ">
|
|
<div class="text-sm font-bold">Nulla porro at ullam exercitationem.</div>
|
|
<div class="text-xs text-grey-500">Code Review</div><span
|
|
class="uppercase font-bold inline-flex text-center badge-sm bg-green-700 text-green-100 rounded-lg text-2xs px-2 py-0">medium</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-auto mr-1 lg:mr-2 whitespace-no-wrap text-xs text-grey-500">Dec 16</div><button
|
|
class="btn btn-circle"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" size="16" class="stroke-current text-grey-500"
|
|
height="16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg></button>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-start mb-2 lg:px-2">
|
|
<div class="form-element form-element-inline"><input type="checkbox" name="3"
|
|
class="form-checkbox text-blue-500 h-4 w-4"></div>
|
|
<div class="ml-4 flex items-start justify-start">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/m2.png" alt="media"
|
|
class="h-8 w-full rounded-full"></div>
|
|
<div class="ml-2 ">
|
|
<div class="text-sm font-bold">Velit ex quaerat voluptatum deserunt.</div>
|
|
<div class="text-xs text-grey-500">Code Review</div><span
|
|
class="uppercase font-bold inline-flex text-center badge-sm bg-cyan-700 text-cyan-100 rounded-lg text-2xs px-2 py-0">important</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-auto mr-1 lg:mr-2 whitespace-no-wrap text-xs text-grey-500">Dec 15</div><button
|
|
class="btn btn-circle"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" size="16" class="stroke-current text-grey-500"
|
|
height="16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg></button>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-start mb-2 lg:px-2">
|
|
<div class="form-element form-element-inline"><input type="checkbox" name="4"
|
|
class="form-checkbox text-blue-500 h-4 w-4"></div>
|
|
<div class="ml-4 flex items-start justify-start">
|
|
<div class="flex-shrink-0 w-8"><img src="/images/faces/m7.png" alt="media"
|
|
class="h-8 w-full rounded-full"></div>
|
|
<div class="ml-2 ">
|
|
<div class="text-sm font-bold">Vel hic laboriosam aut quibusdam.</div>
|
|
<div class="text-xs text-grey-500">In Progress</div><span
|
|
class="uppercase font-bold inline-flex text-center badge-sm bg-cyan-700 text-cyan-100 rounded-lg text-2xs px-2 py-0">low</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-auto mr-1 lg:mr-2 whitespace-no-wrap text-xs text-grey-500">Dec 14</div><button
|
|
class="btn btn-circle"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
|
|
stroke-linecap="round" stroke-linejoin="round" size="16" class="stroke-current text-grey-500"
|
|
height="16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg></button>
|
|
</div>
|
|
<form>
|
|
<div class="form-element"><input type="text" value="" name="todo"
|
|
class="form-input text-sm bg-white dark:bg-grey-800 dark:border-grey-800"
|
|
placeholder="Add new..."></div>
|
|
</form>
|
|
<div class="flex flex-row items-center justify-between">
|
|
<div class="text-sm font-bold">5
|
|
<!-- --> tasks left
|
|
</div>
|
|
<div class="flex flex-row items-center justify-end ml-auto space-x-2"><button
|
|
class="btn btn-default bg-transparent hover:bg-blue-50 text-blue-500 hover:text-blue-600">Clear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |