init
This commit is contained in:
parent
4bb3bae4e6
commit
32357ece0a
@ -5,6 +5,7 @@
|
|||||||
<link rel="icon" href="/favicon.svg" />
|
<link rel="icon" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Svelte App</title>
|
<title>Svelte App</title>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="module" src="/src/index.js"></script>
|
<script type="module" src="/src/index.js"></script>
|
||||||
|
|||||||
7889
package-lock.json
generated
7889
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,9 @@
|
|||||||
"dev": "svite",
|
"dev": "svite",
|
||||||
"build": "svite build"
|
"build": "svite build"
|
||||||
},
|
},
|
||||||
"dependencies": {},
|
"dependencies": {
|
||||||
|
"@odit/lfk-client": "^0.0.3"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"svelte": "^3.29.7",
|
"svelte": "^3.29.7",
|
||||||
"svelte-hmr": "^0.11.6",
|
"svelte-hmr": "^0.11.6",
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
<script>
|
<script>
|
||||||
const world = 'world'; // edit world and save to see hmr update
|
import Login from "./components/Login.svelte";
|
||||||
|
import Dashboard from "./components/Dashboard.svelte";
|
||||||
|
import store from "./store.js";
|
||||||
|
store.init();
|
||||||
|
$: logged_in = $store.isLoggedIn;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
{#if logged_in === true}
|
||||||
h1 {
|
<Dashboard />
|
||||||
color: orangered; /* change color an save to see hmr update */
|
{:else}
|
||||||
}
|
<Login />
|
||||||
</style>
|
{/if}
|
||||||
|
|
||||||
<h1>Hello {world}</h1>
|
|
||||||
<p>Open App.svelte in your editor and change something to see HMR in action</p>
|
|
||||||
|
|||||||
281
src/components/ConversionsChart.svelte
Normal file
281
src/components/ConversionsChart.svelte
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
<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">Conversions</div>
|
||||||
|
<div class="text-sm font-bold"><span>This year</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: 704px; height: 240px;"><svg
|
||||||
|
class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
|
||||||
|
<defs>
|
||||||
|
<clipPath id="recharts3-clip">
|
||||||
|
<rect x="40" y="10" height="190" width="654"></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="654" height="30" x="67.25"
|
||||||
|
y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||||
|
text-anchor="middle">
|
||||||
|
<tspan x="67.25" dy="0.71em">Jan</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="121.75" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="121.75" dy="0.71em">Feb</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="176.25" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="176.25" dy="0.71em">Mar</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="230.75" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="230.75" dy="0.71em">Apr</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="285.25" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="285.25" dy="0.71em">May</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="339.75" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="339.75" dy="0.71em">Jun</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="394.25" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="394.25" dy="0.71em">Jul</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="448.75" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="448.75" dy="0.71em">Aug</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="503.25" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="503.25" dy="0.71em">Sep</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="557.75" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="557.75" dy="0.71em">Oct</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="612.25" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="612.25" dy="0.71em">Nov</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
|
x="666.75" y="208" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
|
<tspan x="666.75" 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="190" x="32"
|
||||||
|
y="200" 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="190" x="32"
|
||||||
|
y="152.5" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
||||||
|
<tspan x="32" dy="0.355em">65</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||||
|
y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||||
|
text-anchor="end">
|
||||||
|
<tspan x="32" dy="0.355em">130</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||||
|
y="57.5" stroke="none" fill="#666"
|
||||||
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
||||||
|
<tspan x="32" dy="0.355em">195</tspan>
|
||||||
|
</text></g>
|
||||||
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||||
|
y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||||
|
text-anchor="end">
|
||||||
|
<tspan x="32" dy="0.355em">260</tspan>
|
||||||
|
</text></g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar">
|
||||||
|
<g class="recharts-layer recharts-bar-rectangles">
|
||||||
|
<g class="recharts-layer">
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="119.11538461538461" x="55" y="80.88461538461539"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="95" x="109.5" y="105" radius="0"
|
||||||
|
class="recharts-rectangle" d="M 109.5,105 h 10 v 95 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="122.03846153846155" x="164" y="77.96153846153845"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="81.11538461538461" x="218.5"
|
||||||
|
y="118.88461538461539" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
|
||||||
|
class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="117.65384615384616" x="327.5"
|
||||||
|
y="82.34615384615384" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="103.76923076923076" x="382" y="96.23076923076924"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="92.80769230769232" x="436.5"
|
||||||
|
y="107.19230769230768" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="92.80769230769232" x="491" y="107.19230769230768"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="127.8846153846154" x="545.5" y="72.1153846153846"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="105.23076923076924" x="600" y="94.76923076923076"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#90caf9" width="10" height="115.46153846153845" x="654.5"
|
||||||
|
y="84.53846153846155" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar">
|
||||||
|
<g class="recharts-layer recharts-bar-rectangles">
|
||||||
|
<g class="recharts-layer">
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="112.53846153846155" x="69" y="87.46153846153845"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="151.26923076923077" x="123.5"
|
||||||
|
y="48.730769230769226" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="181.23076923076923" x="178" y="18.769230769230774"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="165.8846153846154" x="232.5" y="34.11538461538461"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="156.38461538461536" x="287" y="43.61538461538464"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="118.38461538461539" x="341.5"
|
||||||
|
y="81.61538461538461" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="138.84615384615384" x="396" y="61.15384615384616"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="175.3846153846154" x="450.5"
|
||||||
|
y="24.615384615384613" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="155.65384615384613" x="505" y="44.34615384615387"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="179.76923076923077" x="559.5"
|
||||||
|
y="20.230769230769226" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="173.19230769230768" x="614" y="26.80769230769232"
|
||||||
|
radius="0" class="recharts-rectangle"
|
||||||
|
d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
|
<path fill="#1e88e5" width="10" height="146.15384615384616" x="668.5"
|
||||||
|
y="53.84615384615384" radius="0" class="recharts-rectangle"
|
||||||
|
d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<div class="recharts-tooltip-wrapper"
|
||||||
|
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
1852
src/components/Dash.svelte
Normal file
1852
src/components/Dash.svelte
Normal file
File diff suppressed because it is too large
Load Diff
265
src/components/Dashboard.svelte
Normal file
265
src/components/Dashboard.svelte
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
<script>
|
||||||
|
import StatCards from "./StatCards.svelte";
|
||||||
|
import Table from "./Table.svelte";
|
||||||
|
import Pagination from "./Pagination.svelte";
|
||||||
|
import FormLayout from "./FormLayout.svelte";
|
||||||
|
import Tracks from "./Tracks.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<nav class="bg-gray-800">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex items-center justify-between h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
class="h-8 w-8"
|
||||||
|
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
|
||||||
|
alt="Workflow" />
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="ml-10 flex items-baseline space-x-4">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="ml-4 flex items-center md:ml-6">
|
||||||
|
<button
|
||||||
|
class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||||
|
<span class="sr-only">View notifications</span>
|
||||||
|
<!-- Heroicon name: bell -->
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Profile dropdown -->
|
||||||
|
<div class="ml-3 relative">
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
|
||||||
|
id="user-menu"
|
||||||
|
aria-haspopup="true">
|
||||||
|
<span class="sr-only">Open user menu</span>
|
||||||
|
<img
|
||||||
|
class="h-8 w-8 rounded-full"
|
||||||
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||||
|
alt="" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
Profile dropdown panel, show/hide based on dropdown state.
|
||||||
|
|
||||||
|
Entering: "transition ease-out duration-100"
|
||||||
|
From: "transform opacity-0 scale-95"
|
||||||
|
To: "transform opacity-100 scale-100"
|
||||||
|
Leaving: "transition ease-in duration-75"
|
||||||
|
From: "transform opacity-100 scale-100"
|
||||||
|
To: "transform opacity-0 scale-95"
|
||||||
|
-->
|
||||||
|
<div
|
||||||
|
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
|
||||||
|
role="menu"
|
||||||
|
aria-orientation="vertical"
|
||||||
|
aria-labelledby="user-menu">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
role="menuitem">Your Profile</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
role="menuitem">Settings</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
role="menuitem">Sign out</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="-mr-2 flex md:hidden">
|
||||||
|
<!-- Mobile menu button -->
|
||||||
|
<button
|
||||||
|
class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||||
|
<span class="sr-only">Open main menu</span>
|
||||||
|
<!--
|
||||||
|
Heroicon name: menu
|
||||||
|
|
||||||
|
Menu open: "hidden", Menu closed: "block"
|
||||||
|
-->
|
||||||
|
<svg
|
||||||
|
class="block h-6 w-6"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
<!--
|
||||||
|
Heroicon name: x
|
||||||
|
|
||||||
|
Menu open: "block", Menu closed: "hidden"
|
||||||
|
-->
|
||||||
|
<svg
|
||||||
|
class="hidden h-6 w-6"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Mobile menu, toggle classes based on menu state.
|
||||||
|
|
||||||
|
Open: "block", closed: "hidden"
|
||||||
|
-->
|
||||||
|
<div class="hidden md:hidden">
|
||||||
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||||
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
|
||||||
|
</div>
|
||||||
|
<div class="pt-4 pb-3 border-t border-gray-700">
|
||||||
|
<div class="flex items-center px-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
class="h-10 w-10 rounded-full"
|
||||||
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||||
|
alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<div class="text-base font-medium leading-none text-white">
|
||||||
|
Tom Cook
|
||||||
|
</div>
|
||||||
|
<div class="text-sm font-medium leading-none text-gray-400">
|
||||||
|
tom@example.com
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||||
|
<span class="sr-only">View notifications</span>
|
||||||
|
<!-- Heroicon name: bell -->
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 px-2 space-y-1">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your
|
||||||
|
Profile</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign
|
||||||
|
out</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="bg-white shadow">
|
||||||
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||||
|
<h1 class="text-3xl leading-tight">
|
||||||
|
<span class="font-bold">Dashboard</span><span> - hello there 👋</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||||
|
<!-- -->
|
||||||
|
<StatCards />
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
<!-- <div class="mb-8">
|
||||||
|
<Tracks />
|
||||||
|
</div>
|
||||||
|
<Pagination />
|
||||||
|
<div class="mb-8">
|
||||||
|
<Table />
|
||||||
|
</div>
|
||||||
|
<div class="mb-8">
|
||||||
|
<FormLayout />
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
272
src/components/FormLayout.svelte
Normal file
272
src/components/FormLayout.svelte
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
<!--
|
||||||
|
This example requires Tailwind CSS v2.0+
|
||||||
|
|
||||||
|
This example requires some changes to your config:
|
||||||
|
|
||||||
|
```
|
||||||
|
// tailwind.config.js
|
||||||
|
module.exports = {
|
||||||
|
// ...
|
||||||
|
plugins: [
|
||||||
|
// ...
|
||||||
|
require('@tailwindcss/forms'),
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
-->
|
||||||
|
<div>
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<div class="px-4 sm:px-0">
|
||||||
|
<h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-600">
|
||||||
|
This information will be displayed publicly so be careful what you share.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||||
|
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||||
|
<div class="grid grid-cols-3 gap-6">
|
||||||
|
<div class="col-span-3 sm:col-span-2">
|
||||||
|
<label for="company_website" class="block text-sm font-medium text-gray-700">
|
||||||
|
Website
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex rounded-md shadow-sm">
|
||||||
|
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
|
||||||
|
http://
|
||||||
|
</span>
|
||||||
|
<input type="text" name="company_website" id="company_website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="about" class="block text-sm font-medium text-gray-700">
|
||||||
|
About
|
||||||
|
</label>
|
||||||
|
<div class="mt-1">
|
||||||
|
<textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2 text-sm text-gray-500">
|
||||||
|
Brief description for your profile. URLs are hyperlinked.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700">
|
||||||
|
Photo
|
||||||
|
</label>
|
||||||
|
<div class="mt-2 flex items-center">
|
||||||
|
<span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
|
||||||
|
<svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Change
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700">
|
||||||
|
Cover photo
|
||||||
|
</label>
|
||||||
|
<div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||||
|
<div class="space-y-1 text-center">
|
||||||
|
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<div class="flex text-sm text-gray-600">
|
||||||
|
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
|
||||||
|
<span>Upload a file</span>
|
||||||
|
<input id="file-upload" name="file-upload" type="file" class="sr-only">
|
||||||
|
</label>
|
||||||
|
<p class="pl-1">or drag and drop</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-500">
|
||||||
|
PNG, JPG, GIF up to 10MB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||||
|
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden sm:block" aria-hidden="true">
|
||||||
|
<div class="py-5">
|
||||||
|
<div class="border-t border-gray-200"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-10 sm:mt-0">
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<div class="px-4 sm:px-0">
|
||||||
|
<h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-600">
|
||||||
|
Use a permanent address where you can receive mail.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="shadow overflow-hidden sm:rounded-md">
|
||||||
|
<div class="px-4 py-5 bg-white sm:p-6">
|
||||||
|
<div class="grid grid-cols-6 gap-6">
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label for="first_name" class="block text-sm font-medium text-gray-700">First name</label>
|
||||||
|
<input type="text" name="first_name" id="first_name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label for="last_name" class="block text-sm font-medium text-gray-700">Last name</label>
|
||||||
|
<input type="text" name="last_name" id="last_name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-4">
|
||||||
|
<label for="email_address" class="block text-sm font-medium text-gray-700">Email address</label>
|
||||||
|
<input type="text" name="email_address" id="email_address" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label for="country" class="block text-sm font-medium text-gray-700">Country / Region</label>
|
||||||
|
<select id="country" name="country" autocomplete="country" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
||||||
|
<option>United States</option>
|
||||||
|
<option>Canada</option>
|
||||||
|
<option>Mexico</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6">
|
||||||
|
<label for="street_address" class="block text-sm font-medium text-gray-700">Street address</label>
|
||||||
|
<input type="text" name="street_address" id="street_address" autocomplete="street-address" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-6 lg:col-span-2">
|
||||||
|
<label for="city" class="block text-sm font-medium text-gray-700">City</label>
|
||||||
|
<input type="text" name="city" id="city" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
|
||||||
|
<label for="state" class="block text-sm font-medium text-gray-700">State / Province</label>
|
||||||
|
<input type="text" name="state" id="state" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
|
||||||
|
<label for="postal_code" class="block text-sm font-medium text-gray-700">ZIP / Postal</label>
|
||||||
|
<input type="text" name="postal_code" id="postal_code" autocomplete="postal-code" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||||
|
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden sm:block" aria-hidden="true">
|
||||||
|
<div class="py-5">
|
||||||
|
<div class="border-t border-gray-200"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-10 sm:mt-0">
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<div class="px-4 sm:px-0">
|
||||||
|
<h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-600">
|
||||||
|
Decide which communications you'd like to receive and how.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="shadow overflow-hidden sm:rounded-md">
|
||||||
|
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||||
|
<fieldset>
|
||||||
|
<legend class="text-base font-medium text-gray-900">By Email</legend>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label for="comments" class="font-medium text-gray-700">Comments</label>
|
||||||
|
<p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label for="candidates" class="font-medium text-gray-700">Candidates</label>
|
||||||
|
<p class="text-gray-500">Get notified when a candidate applies for a job.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input id="offers" name="offers" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label for="offers" class="font-medium text-gray-700">Offers</label>
|
||||||
|
<p class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<div>
|
||||||
|
<legend class="text-base font-medium text-gray-900">Push Notifications</legend>
|
||||||
|
<p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="push_everything" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="push_everything" class="ml-3 block text-sm font-medium text-gray-700">
|
||||||
|
Everything
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="push_email" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="push_email" class="ml-3 block text-sm font-medium text-gray-700">
|
||||||
|
Same as email
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="push_nothing" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="push_nothing" class="ml-3 block text-sm font-medium text-gray-700">
|
||||||
|
No push notifications
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||||
|
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
81
src/components/Login.svelte
Normal file
81
src/components/Login.svelte
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<script>
|
||||||
|
import store from "../store.js";
|
||||||
|
store.init();
|
||||||
|
const login = () => {
|
||||||
|
store.login();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||||
|
<div class="max-w-md w-full py-12 px-6">
|
||||||
|
<img class="mx-auto h-20 w-auto" src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png" alt="" />
|
||||||
|
<p class="mt-6 text-sm text-center text-gray-900">Log in to your account</p>
|
||||||
|
<div>
|
||||||
|
<div class="rounded-md shadow-sm">
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
aria-label="Email address"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
required=""
|
||||||
|
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||||
|
placeholder="Email address"
|
||||||
|
value="" />
|
||||||
|
</div>
|
||||||
|
<div class="-mt-px relative">
|
||||||
|
<input
|
||||||
|
aria-label="Password"
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
required=""
|
||||||
|
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||||
|
placeholder="Password" />
|
||||||
|
<div
|
||||||
|
class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm">
|
||||||
|
<a
|
||||||
|
href="https://tailwindui.com/password/reset"
|
||||||
|
class="text-gray-900 underline">Forgot?</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5">
|
||||||
|
<button
|
||||||
|
on:click={login}
|
||||||
|
type="submit"
|
||||||
|
class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||||
|
<span class="absolute left-0 inset-y pl-3">
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 text-gray-500"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Log in
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute inset-0 flex items-center">
|
||||||
|
<div class="w-full border-t border-gray-300" />
|
||||||
|
</div>
|
||||||
|
<div class="relative flex justify-center text-sm">
|
||||||
|
<span class="px-2 bg-gray-100 text-gray-500">Don't have an account?</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6">
|
||||||
|
<a
|
||||||
|
href="/pricing"
|
||||||
|
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
|
||||||
|
Register
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
97
src/components/LoginAlt.svelte
Normal file
97
src/components/LoginAlt.svelte
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<script>
|
||||||
|
import store from "../store.js";
|
||||||
|
store.init();
|
||||||
|
const login = () => {
|
||||||
|
store.login();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-md w-full space-y-8">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
class="mx-auto h-12 w-auto"
|
||||||
|
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
|
||||||
|
alt="Workflow" />
|
||||||
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||||
|
Sign in to your account
|
||||||
|
</h2>
|
||||||
|
<p class="mt-2 text-center text-sm text-gray-600">
|
||||||
|
Or
|
||||||
|
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
|
||||||
|
start your 14-day free trial
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="hidden" name="remember" value="true" />
|
||||||
|
<div class="rounded-md shadow-sm -space-y-px">
|
||||||
|
<div>
|
||||||
|
<label for="email-address" class="sr-only">Email address</label>
|
||||||
|
<input
|
||||||
|
id="email-address"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
autocomplete="email"
|
||||||
|
required
|
||||||
|
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||||||
|
placeholder="Email address" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="password" class="sr-only">Password</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
autocomplete="current-password"
|
||||||
|
required
|
||||||
|
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||||||
|
placeholder="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id="remember_me"
|
||||||
|
name="remember_me"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
|
||||||
|
<label for="remember_me" class="ml-2 block text-sm text-gray-900">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-sm">
|
||||||
|
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
|
||||||
|
Forgot your password?
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
on:click="{login}"
|
||||||
|
type="submit"
|
||||||
|
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
|
||||||
|
<!-- Heroicon name: lock-closed -->
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Sign in
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
103
src/components/Pagination.svelte
Normal file
103
src/components/Pagination.svelte
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
|
<div
|
||||||
|
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||||
|
<div class="flex-1 flex justify-between sm:hidden">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
|
||||||
|
Previous
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
|
||||||
|
Next
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-700">
|
||||||
|
Showing
|
||||||
|
<span class="font-medium">1</span>
|
||||||
|
to
|
||||||
|
<span class="font-medium">10</span>
|
||||||
|
of
|
||||||
|
<span class="font-medium">97</span>
|
||||||
|
results
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<nav
|
||||||
|
class="relative z-0 inline-flex shadow-sm -space-x-px"
|
||||||
|
aria-label="Pagination">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||||||
|
<span class="sr-only">Previous</span>
|
||||||
|
<!-- Heroicon name: chevron-left -->
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
|
1
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
|
2
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
|
3
|
||||||
|
</a>
|
||||||
|
<span
|
||||||
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
||||||
|
...
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
|
8
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
|
9
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
|
10
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||||||
|
<span class="sr-only">Next</span>
|
||||||
|
<!-- Heroicon name: chevron-right -->
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
104
src/components/StatCards.svelte
Normal file
104
src/components/StatCards.svelte
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<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" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||||
|
<path d="M16 3.13a4 4 0 0 1 0 7.75" /></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" /></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" />
|
||||||
|
<polyline points="15 3 21 3 21 9" />
|
||||||
|
<line x1="10" y1="14" x2="21" y2="3" /></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" />
|
||||||
|
<polyline points="12 6 12 12 16 14" /></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
84
src/components/Table.svelte
Normal file
84
src/components/Table.svelte
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||||
|
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||||
|
<div
|
||||||
|
class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Name
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Title
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Role
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="relative px-6 py-3">
|
||||||
|
<span class="sr-only">Edit</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y divide-gray-200">
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0 h-10 w-10">
|
||||||
|
<img
|
||||||
|
class="h-10 w-10 rounded-full"
|
||||||
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
|
||||||
|
alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-medium text-gray-900">
|
||||||
|
Jane Cooper
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">
|
||||||
|
jane.cooper@example.com
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">
|
||||||
|
Regional Paradigm Technician
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">Optimization</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span
|
||||||
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
Admin
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- More rows... -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
22
src/components/Tmp.svelte
Normal file
22
src/components/Tmp.svelte
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<script>
|
||||||
|
import { OpenAPI, TrackService } from "@odit/lfk-client";
|
||||||
|
OpenAPI.BASE = "http://localhost:4010";
|
||||||
|
let tracks_promise = TrackService.trackControllerGetAll();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>Tracks</h1>
|
||||||
|
{#await tracks_promise then tracks}
|
||||||
|
<h4>{tracks.length}</h4>
|
||||||
|
<hr />
|
||||||
|
{#if tracks.length % 2 == 0}
|
||||||
|
<ul>
|
||||||
|
{#each tracks as item}
|
||||||
|
<li>{item.distance}</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{:else}
|
||||||
|
{#each tracks as item}<span>{item.distance}</span><br />{/each}
|
||||||
|
{/if}
|
||||||
|
{:catch error}
|
||||||
|
ERORRRRR
|
||||||
|
{/await}
|
||||||
22
src/components/Tracks.svelte
Normal file
22
src/components/Tracks.svelte
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<script>
|
||||||
|
import { OpenAPI, TrackService } from "@odit/lfk-client";
|
||||||
|
OpenAPI.BASE = "http://localhost:4010";
|
||||||
|
let tracks_promise = TrackService.trackControllerGetAll();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>Tracks</h1>
|
||||||
|
{#await tracks_promise then tracks}
|
||||||
|
<h4>{tracks.length}</h4>
|
||||||
|
<hr />
|
||||||
|
{#if tracks.length % 2 == 0}
|
||||||
|
<ul>
|
||||||
|
{#each tracks as item}
|
||||||
|
<li>{item.distance}</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{:else}
|
||||||
|
{#each tracks as item}<span>{item.distance}</span><br />{/each}
|
||||||
|
{/if}
|
||||||
|
{:catch error}
|
||||||
|
ERORRRRR
|
||||||
|
{/await}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import App from './App.svelte';
|
import App from './App.svelte';
|
||||||
|
|
||||||
const app = new App({
|
const app = new App({
|
||||||
target: document.body,
|
target: document.body
|
||||||
});
|
});
|
||||||
|
|
||||||
export default app;
|
export default app;
|
||||||
|
|||||||
42
src/store.js
Normal file
42
src/store.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
const store = () => {
|
||||||
|
const state = {
|
||||||
|
isLoggedIn: false
|
||||||
|
};
|
||||||
|
|
||||||
|
const { subscribe, set, update } = writable(state);
|
||||||
|
|
||||||
|
const methods = {
|
||||||
|
init() {
|
||||||
|
console.log('*: playerStore -> init()');
|
||||||
|
update((state) => {
|
||||||
|
state.isLoggedIn = false;
|
||||||
|
return state;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
login() {
|
||||||
|
update((state) => {
|
||||||
|
state.isLoggedIn = true;
|
||||||
|
console.log('login performed');
|
||||||
|
return state;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
update((state) => {
|
||||||
|
state.isLoggedIn = false;
|
||||||
|
return state;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
subscribe,
|
||||||
|
set,
|
||||||
|
update,
|
||||||
|
...methods
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default store();
|
||||||
Loading…
x
Reference in New Issue
Block a user