Commit 5f2a2635a1a8ad726eedde4c69e275c4c3c2dba7

Authored by Андрей Ларионов 2023-09-08 12:20:31 +0300

Showing 43 changed files with 11487 additions and 9 deletions Side-by-side Diff

app/Http/Controllers/Admin/JobTitlesController.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,97 @@
	1	+<?php
	2	+
	3	+namespace App\Http\Controllers\Admin;
	4	+
	5	+use App\Http\Controllers\Controller;
	6	+use App\Http\Requests\JobTitlesRequest;
	7	+use App\Models\Job_title;
	8	+use Illuminate\Http\Request;
	9	+
	10	+class JobTitlesController extends Controller
	11	+{
	12	+ /**
	13	+ * Display a listing of the resource.
	14	+ *
	15	+ * @return \Illuminate\Http\Response
	16	+ */
	17	+ public function index()
	18	+ {
	19	+ $Jobs = Job_title::query()->orderBy('name')->active()->paginate(15);
	20	+ return view('admin.job_titles.index', compact('Jobs'));
	21	+ }
	22	+
	23	+ /**
	24	+ * Show the form for creating a new resource.
	25	+ *
	26	+ * @return \Illuminate\Http\Response
	27	+ */
	28	+ public function create()
	29	+ {
	30	+ /*$items = Job_title::query()->
	31	+ orderByDesc('sort')->
	32	+ orderBy('name')->
	33	+ active()->
	34	+ get();*/
	35	+
	36	+ return view('admin.job_titles.add');
	37	+ }
	38	+
	39	+ /**
	40	+ * Store a newly created resource in storage.
	41	+ *
	42	+ * @param \Illuminate\Http\Request $request
	43	+ * @return \Illuminate\Http\Response
	44	+ */
	45	+ public function store(JobTitlesRequest $request)
	46	+ {
	47	+ Job_title::create($request->all());
	48	+ return redirect()->route('admin.job-titles.index');
	49	+ }
	50	+
	51	+ /**
	52	+ * Display the specified resource.
	53	+ *
	54	+ * @param \App\Models\Job_title $job_title
	55	+ * @return \Illuminate\Http\Response
	56	+ */
	57	+ public function show(Job_title $job_title)
	58	+ {
	59	+ //
	60	+ }
	61	+
	62	+ /**
	63	+ * Show the form for editing the specified resource.
	64	+ *
	65	+ * @param \App\Models\Job_title $job_title
	66	+ * @return \Illuminate\Http\Response
	67	+ */
	68	+ public function edit(Job_title $job_title)
	69	+ {
	70	+ return view('admin.job_titles.edit', compact('job_title'));
	71	+ }
	72	+
	73	+ /**
	74	+ * Update the specified resource in storage.
	75	+ *
	76	+ * @param \Illuminate\Http\Request $request
	77	+ * @param \App\Models\Job_title $job_title
	78	+ * @return \Illuminate\Http\Response
	79	+ */
	80	+ public function update(JobTitlesRequest $request, Job_title $job_title)
	81	+ {
	82	+ $job_title->update($request->all());
	83	+ return redirect()->route('admin.job-titles.index');
	84	+ }
	85	+
	86	+ /**
	87	+ * Remove the specified resource from storage.
	88	+ *
	89	+ * @param \App\Models\Job_title $job_title
	90	+ * @return \Illuminate\Http\Response
	91	+ */
	92	+ public function destroy(Job_title $job_title)
	93	+ {
	94	+ $job_title->update(['is_remove' => 1]);
	95	+ return redirect()->route('admin.job-titles.index');
	96	+ }
	97	+}

app/Http/Requests/JobTitlesRequest.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,57 @@
	1	+<?php
	2	+
	3	+namespace App\Http\Requests;
	4	+
	5	+use Illuminate\Foundation\Http\FormRequest;
	6	+
	7	+class JobTitlesRequest extends FormRequest
	8	+{
	9	+ /**
	10	+ * Determine if the user is authorized to make this request.
	11	+ *
	12	+ * @return bool
	13	+ */
	14	+ public function authorize()
	15	+ {
	16	+ return true;
	17	+ }
	18	+
	19	+ /**
	20	+ * Get the validation rules that apply to the request.
	21	+ *
	22	+ * @return array<string, mixed>
	23	+ */
	24	+ public function rules()
	25	+ {
	26	+ return [
	27	+ 'name' => [
	28	+ 'required',
	29	+ 'min:3',
	30	+ 'max:100',
	31	+ ],
	32	+ 'parent_id' => [
	33	+ 'numeric',
	34	+ 'min:0',
	35	+ 'max:9999999',
	36	+ ],
	37	+ ];
	38	+ }
	39	+
	40	+ public function messages() {
	41	+ return [
	42	+ 'required' => 'Поле «:attribute» обязательно для заполнения',
	43	+ 'unique' => 'Такое значение поля «:attribute» уже используется',
	44	+ 'min' => [
	45	+ 'string' => 'Поле «:attribute» должно быть не меньше :min символов',
	46	+ 'file' => 'Файл «:attribute» должен быть не меньше :min Кбайт'
	47	+ ],
	48	+ 'max' => [
	49	+ 'string' => 'Поле «:attribute» должно быть не больше :max символов',
	50	+ 'file' => 'Файл «:attribute» должен быть не больше :max Кбайт'
	51	+ ],
	52	+ 'mimes' => 'Файл «:attribute» должен иметь формат :values',
	53	+ 'numeric' => 'В поле «:attribute» должно быть указано целое число от 0 до 9999999',
	54	+ ];
	55	+
	56	+ }
	57	+}

app/Models/Job_title.php

Diff comments   View file @ 5f2a263

...	...	@@ -21,6 +21,14 @@ class Job_title extends Model
21	21	return $this->belongsToMany(Ad_employer::class, 'ad_jobs');
22	22	}
23	23
	24	+ /*
	25	+ * Связь таблицы job_titles с таблицей job_titles через ключ parent_id
	26	+ многие-к-одному
	27	+ */
	28	+ public function parent() {
	29	+ return $this->belongsTo(Job_title::class, 'parent_id');
	30	+ }
	31	+
24	32	public function scopeActive($query) {
25	33	return $query->where('is_remove', '=', '0');
26	34	}

app/Providers/MyServiceProvider.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,49 @@
	1	+<?php
	2	+
	3	+namespace App\Providers;
	4	+
	5	+use App\Models\Job_title;
	6	+use Illuminate\Support\Facades\View;
	7	+use Illuminate\Support\ServiceProvider;
	8	+
	9	+class MyServiceProvider extends ServiceProvider
	10	+{
	11	+ /**
	12	+ * Register services.
	13	+ *
	14	+ * @return void
	15	+ */
	16	+ public function register()
	17	+ {
	18	+ //
	19	+ }
	20	+
	21	+ /**
	22	+ * Bootstrap services.
	23	+ *
	24	+ * @return void
	25	+ */
	26	+ public function boot()
	27	+ {
	28	+ $views = ['admin.job_titles.parent_id'];
	29	+ View::composer($views,
	30	+ function($view)
	31	+ {
	32	+ static $items = null;
	33	+
	34	+ if (is_null($items)) {
	35	+ $items = Job_title::query()->
	36	+ orderByDesc('sort')->
	37	+ orderBy('name')->
	38	+ active()->
	39	+ get();
	40	+ $parent = 0;
	41	+ $view->with(['items' => $items, 'parent' => $parent]);
	42	+ } else {
	43	+ $view->with(['items' => $items]);
	44	+ }
	45	+
	46	+ }
	47	+ );
	48	+ }
	49	+}

config/app.php

Diff comments   View file @ 5f2a263

...	...	@@ -194,7 +194,7 @@ return [
194	194	// App\Providers\BroadcastServiceProvider::class,
195	195	App\Providers\EventServiceProvider::class,
196	196	App\Providers\RouteServiceProvider::class,
197		-
	197	+ App\Providers\MyServiceProvider::class,
198	198	],
199	199
200	200	/*

database/migrations/2023_09_08_084707_alter_job_titles3_table.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,32 @@
	1	+<?php
	2	+
	3	+use Illuminate\Database\Migrations\Migration;
	4	+use Illuminate\Database\Schema\Blueprint;
	5	+use Illuminate\Support\Facades\Schema;
	6	+
	7	+return new class extends Migration
	8	+{
	9	+ /**
	10	+ * Run the migrations.
	11	+ *
	12	+ * @return void
	13	+ */
	14	+ public function up()
	15	+ {
	16	+ Schema::table('job_titles', function (Blueprint $table) {
	17	+ $table->integer('sort')->default(100);
	18	+ });
	19	+ }
	20	+
	21	+ /**
	22	+ * Reverse the migrations.
	23	+ *
	24	+ * @return void
	25	+ */
	26	+ public function down()
	27	+ {
	28	+ Schema::table('job_titles', function (Blueprint $table) {
	29	+ $table->dropColumn('sort');
	30	+ });
	31	+ }
	32	+};

html/public/assets/css/tailwind.css

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,3 @@
	1	+@tailwind base;
	2	+@tailwind components;
	3	+@tailwind utilities;

html/public/assets/css/tailwind.output.css

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1 @@
	1	+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none;padding:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #d5d6d7}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#a0aec0}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#a0aec0}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:#a0aec0}input::placeholder,textarea::placeholder{color:#a0aec0}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#e2e8f0;border-width:1px;border-radius:.25rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5}.form-input::-moz-placeholder{color:#9e9e9e;opacity:1}.form-input:-ms-input-placeholder{color:#9e9e9e;opacity:1}.form-input::-ms-input-placeholder{color:#9e9e9e;opacity:1}.form-input::placeholder{color:#9e9e9e;opacity:1}.form-input:focus{outline:none;box-shadow:0 0 0 3px rgba(66,153,225,.5);border-color:#63b3ed}.form-textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#e2e8f0;border-width:1px;border-radius:.25rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5}.form-textarea::-moz-placeholder{color:#9e9e9e;opacity:1}.form-textarea:-ms-input-placeholder{color:#9e9e9e;opacity:1}.form-textarea::-ms-input-placeholder{color:#9e9e9e;opacity:1}.form-textarea::placeholder{color:#9e9e9e;opacity:1}.form-textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(66,153,225,.5);border-color:#63b3ed}.form-multiselect{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#e2e8f0;border-width:1px;border-radius:.25rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5}.form-multiselect:focus{outline:none;box-shadow:0 0 0 3px rgba(66,153,225,.5);border-color:#63b3ed}.form-select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3E%3Cpath d='M15.3 9.3a1 1 0 011.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4l3.3 3.29 3.3-3.3z'/%3E%3C/svg%3E");-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;background-repeat:no-repeat;background-color:#fff;border-color:#e2e8f0;border-width:1px;border-radius:.25rem;padding:.5rem 2.5rem .5rem .75rem;font-size:1rem;line-height:1.5;background-position:right .5rem center;background-size:1.5em 1.5em}.form-select::-ms-expand{color:#a0aec0;border:none}@media not print{.form-select::-ms-expand{display:none}}@media print and (-ms-high-contrast:active),print and (-ms-high-contrast:none){.form-select{padding-right:.75rem}}.form-select:focus{outline:none;box-shadow:0 0 0 3px rgba(66,153,225,.5);border-color:#63b3ed}.form-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-shrink:0;height:1em;width:1em;color:#4299e1;background-color:#fff;border-color:#e2e8f0;border-width:1px;border-radius:.25rem}.form-checkbox:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media not print{.form-checkbox::-ms-check{border-width:1px;color:transparent;background:inherit;border-color:inherit;border-radius:inherit}}.form-checkbox:focus{outline:none;box-shadow:0 0 0 3px rgba(66,153,225,.5);border-color:#63b3ed}.form-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-shrink:0;border-radius:100%;height:1em;width:1em;color:#4299e1;background-color:#fff;border-color:#e2e8f0;border-width:1px}.form-radio:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media not print{.form-radio::-ms-check{border-width:1px;color:transparent;background:inherit;border-color:inherit;border-radius:inherit}}.form-radio:focus{outline:none;box-shadow:0 0 0 3px rgba(66,153,225,.5);border-color:#63b3ed}.space-y-2>:not(template)~:not(template){--space-y-reverse:0;margin-top:calc(0.5rem*(1 - var(--space-y-reverse)));margin-bottom:calc(0.5rem*var(--space-y-reverse))}.space-x-3>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(0.75rem*var(--space-x-reverse));margin-left:calc(0.75rem*(1 - var(--space-x-reverse)))}.space-y-4>:not(template)~:not(template){--space-y-reverse:0;margin-top:calc(1rem*(1 - var(--space-y-reverse)));margin-bottom:calc(1rem*var(--space-y-reverse))}.space-x-4>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(1rem*var(--space-x-reverse));margin-left:calc(1rem*(1 - var(--space-x-reverse)))}.space-x-6>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(1.5rem*var(--space-x-reverse));margin-left:calc(1.5rem*(1 - var(--space-x-reverse)))}.divide-y>:not(template)~:not(template){--divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--divide-y-reverse)));border-bottom-width:calc(1px*var(--divide-y-reverse))}.theme-dark .dark\:divide-gray-700>:not(template)~:not(template){--divide-opacity:1;border-color:#24262d;border-color:rgba(36,38,45,var(--divide-opacity))}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-black{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.bg-gray-50{--bg-opacity:1;background-color:#f9fafb;background-color:rgba(249,250,251,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f4f5f7;background-color:rgba(244,245,247,var(--bg-opacity))}.bg-red-100{--bg-opacity:1;background-color:#fde8e8;background-color:rgba(253,232,232,var(--bg-opacity))}.bg-red-600{--bg-opacity:1;background-color:#e02424;background-color:rgba(224,36,36,var(--bg-opacity))}.bg-orange-100{--bg-opacity:1;background-color:#feecdc;background-color:rgba(254,236,220,var(--bg-opacity))}.bg-green-100{--bg-opacity:1;background-color:#def7ec;background-color:rgba(222,247,236,var(--bg-opacity))}.bg-teal-100{--bg-opacity:1;background-color:#d5f5f6;background-color:rgba(213,245,246,var(--bg-opacity))}.bg-teal-500{--bg-opacity:1;background-color:#0694a2;background-color:rgba(6,148,162,var(--bg-opacity))}.bg-teal-600{--bg-opacity:1;background-color:#047481;background-color:rgba(4,116,129,var(--bg-opacity))}.bg-blue-100{--bg-opacity:1;background-color:#e1effe;background-color:rgba(225,239,254,var(--bg-opacity))}.bg-blue-500{--bg-opacity:1;background-color:#3f83f8;background-color:rgba(63,131,248,var(--bg-opacity))}.bg-blue-600{--bg-opacity:1;background-color:#1c64f2;background-color:rgba(28,100,242,var(--bg-opacity))}.bg-purple-600{--bg-opacity:1;background-color:#7e3af2;background-color:rgba(126,58,242,var(--bg-opacity))}.hover\:bg-gray-100:hover{--bg-opacity:1;background-color:#f4f5f7;background-color:rgba(244,245,247,var(--bg-opacity))}.hover\:bg-purple-700:hover{--bg-opacity:1;background-color:#6c2bd9;background-color:rgba(108,43,217,var(--bg-opacity))}.focus\:bg-white:focus{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.active\:bg-transparent:active{background-color:transparent}.active\:bg-purple-600:active{--bg-opacity:1;background-color:#7e3af2;background-color:rgba(126,58,242,var(--bg-opacity))}.theme-dark .dark\:bg-gray-700{--bg-opacity:1;background-color:#24262d;background-color:rgba(36,38,45,var(--bg-opacity))}.theme-dark .dark\:bg-gray-800{--bg-opacity:1;background-color:#1a1c23;background-color:rgba(26,28,35,var(--bg-opacity))}.theme-dark .dark\:bg-gray-900{--bg-opacity:1;background-color:#121317;background-color:rgba(18,19,23,var(--bg-opacity))}.theme-dark .dark\:bg-red-600{--bg-opacity:1;background-color:#e02424;background-color:rgba(224,36,36,var(--bg-opacity))}.theme-dark .dark\:bg-red-700{--bg-opacity:1;background-color:#c81e1e;background-color:rgba(200,30,30,var(--bg-opacity))}.theme-dark .dark\:bg-orange-500{--bg-opacity:1;background-color:#ff5a1f;background-color:rgba(255,90,31,var(--bg-opacity))}.theme-dark .dark\:bg-orange-600{--bg-opacity:1;background-color:#d03801;background-color:rgba(208,56,1,var(--bg-opacity))}.theme-dark .dark\:bg-green-500{--bg-opacity:1;background-color:#0e9f6e;background-color:rgba(14,159,110,var(--bg-opacity))}.theme-dark .dark\:bg-green-700{--bg-opacity:1;background-color:#046c4e;background-color:rgba(4,108,78,var(--bg-opacity))}.theme-dark .dark\:bg-teal-500{--bg-opacity:1;background-color:#0694a2;background-color:rgba(6,148,162,var(--bg-opacity))}.theme-dark .dark\:bg-blue-500{--bg-opacity:1;background-color:#3f83f8;background-color:rgba(63,131,248,var(--bg-opacity))}.theme-dark .dark\:hover\:bg-gray-800:hover{--bg-opacity:1;background-color:#1a1c23;background-color:rgba(26,28,35,var(--bg-opacity))}.bg-opacity-50{--bg-opacity:0.5}.border-transparent{border-color:transparent}.border-white{--border-opacity:1;border-color:#fff;border-color:rgba(255,255,255,var(--border-opacity))}.border-gray-100{--border-opacity:1;border-color:#f4f5f7;border-color:rgba(244,245,247,var(--border-opacity))}.border-gray-300{--border-opacity:1;border-color:#d5d6d7;border-color:rgba(213,214,215,var(--border-opacity))}.border-red-600{--border-opacity:1;border-color:#e02424;border-color:rgba(224,36,36,var(--border-opacity))}.border-green-600{--border-opacity:1;border-color:#057a55;border-color:rgba(5,122,85,var(--border-opacity))}.border-purple-600{--border-opacity:1;border-color:#7e3af2;border-color:rgba(126,58,242,var(--border-opacity))}.focus\:border-gray-500:focus{--border-opacity:1;border-color:#707275;border-color:rgba(112,114,117,var(--border-opacity))}.focus\:border-red-400:focus{--border-opacity:1;border-color:#f98080;border-color:rgba(249,128,128,var(--border-opacity))}.focus\:border-green-400:focus{--border-opacity:1;border-color:#31c48d;border-color:rgba(49,196,141,var(--border-opacity))}.focus\:border-purple-300:focus{--border-opacity:1;border-color:#cabffd;border-color:rgba(202,191,253,var(--border-opacity))}.focus\:border-purple-400:focus{--border-opacity:1;border-color:#ac94fa;border-color:rgba(172,148,250,var(--border-opacity))}.hover\:border-gray-500:hover{--border-opacity:1;border-color:#707275;border-color:rgba(112,114,117,var(--border-opacity))}.theme-dark .dark\:border-gray-600{--border-opacity:1;border-color:#4c4f52;border-color:rgba(76,79,82,var(--border-opacity))}.theme-dark .dark\:border-gray-700{--border-opacity:1;border-color:#24262d;border-color:rgba(36,38,45,var(--border-opacity))}.theme-dark .dark\:border-gray-800{--border-opacity:1;border-color:#1a1c23;border-color:rgba(26,28,35,var(--border-opacity))}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem}.rounded-r-lg,.rounded-t-lg{border-top-right-radius:.5rem}.rounded-r-lg{border-bottom-right-radius:.5rem}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-tr-lg{border-top-right-radius:.5rem}.rounded-br-lg{border-bottom-right-radius:.5rem}.border-0{border-width:0}.border-2{border-width:2px}.border{border-width:1px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.cursor-not-allowed{cursor:not-allowed}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.theme-dark .dark\:block{display:block}.theme-dark .dark\:hidden{display:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-12{height:3rem}.h-32{height:8rem}.h-full{height:100%}.h-screen{height:100vh}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-6xl{font-size:4rem}.leading-5{line-height:1.25rem}.leading-none{line-height:1}.leading-tight{line-height:1.25}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mx-auto{margin-left:auto;margin-right:auto}.-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mr-3{margin-right:.75rem}.ml-3{margin-left:.75rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mr-5{margin-right:1.25rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mt-16{margin-top:4rem}.-mr-1{margin-right:-.25rem}.-ml-1{margin-left:-.25rem}.-mb-4{margin-bottom:-1rem}.max-h-0{max-height:0}.max-h-xl{max-height:36rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.min-h-screen{min-height:100vh}.min-w-0{min-width:0}.object-cover{-o-object-fit:cover;object-fit:cover}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-100{opacity:1}.focus\:outline-none:focus{outline:0}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.pr-2{padding-right:.5rem}.pl-2{padding-left:.5rem}.pl-8{padding-left:2rem}.pr-10{padding-right:2.5rem}.pl-10{padding-left:2.5rem}.pb-16{padding-bottom:4rem}.pr-20{padding-right:5rem}.pl-20{padding-left:5rem}.placeholder-gray-600::-moz-placeholder{--placeholder-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--placeholder-opacity))}.placeholder-gray-600:-ms-input-placeholder{--placeholder-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--placeholder-opacity))}.placeholder-gray-600::-ms-input-placeholder{--placeholder-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--placeholder-opacity))}.placeholder-gray-600::placeholder{--placeholder-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--placeholder-opacity))}.focus\:placeholder-gray-500:focus::-moz-placeholder{--placeholder-opacity:1;color:#707275;color:rgba(112,114,117,var(--placeholder-opacity))}.focus\:placeholder-gray-500:focus:-ms-input-placeholder{--placeholder-opacity:1;color:#707275;color:rgba(112,114,117,var(--placeholder-opacity))}.focus\:placeholder-gray-500:focus::-ms-input-placeholder{--placeholder-opacity:1;color:#707275;color:rgba(112,114,117,var(--placeholder-opacity))}.focus\:placeholder-gray-500:focus::placeholder{--placeholder-opacity:1;color:#707275;color:rgba(112,114,117,var(--placeholder-opacity))}.theme-dark .dark\:placeholder-gray-500::-moz-placeholder{--placeholder-opacity:1;color:#707275;color:rgba(112,114,117,var(--placeholder-opacity))}.theme-dark .dark\:placeholder-gray-500:-ms-input-placeholder{--placeholder-opacity:1;color:#707275;color:rgba(112,114,117,var(--placeholder-opacity))}.theme-dark .dark\:placeholder-gray-500::-ms-input-placeholder{--placeholder-opacity:1;color:#707275;color:rgba(112,114,117,var(--placeholder-opacity))}.theme-dark .dark\:placeholder-gray-500::placeholder{--placeholder-opacity:1;color:#707275;color:rgba(112,114,117,var(--placeholder-opacity))}.theme-dark .dark\:focus\:placeholder-gray-600:focus::-moz-placeholder{--placeholder-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--placeholder-opacity))}.theme-dark .dark\:focus\:placeholder-gray-600:focus:-ms-input-placeholder{--placeholder-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--placeholder-opacity))}.theme-dark .dark\:focus\:placeholder-gray-600:focus::-ms-input-placeholder{--placeholder-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--placeholder-opacity))}.theme-dark .dark\:focus\:placeholder-gray-600:focus::placeholder{--placeholder-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--placeholder-opacity))}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{right:0;left:0}.inset-0,.inset-y-0{top:0;bottom:0}.top-0{top:0}.right-0{right:0}.left-0{left:0}.shadow-xs{box-shadow:0 0 0 1px rgba(0,0,0,.05)}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}.shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.06)}.fill-current{fill:currentColor}.text-left{text-align:left}.text-center{text-align:center}.text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.text-black{--text-opacity:1;color:#000;color:rgba(0,0,0,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#9e9e9e;color:rgba(158,158,158,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#707275;color:rgba(112,114,117,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#4c4f52;color:rgba(76,79,82,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#24262d;color:rgba(36,38,45,var(--text-opacity))}.text-gray-800{--text-opacity:1;color:#1a1c23;color:rgba(26,28,35,var(--text-opacity))}.text-red-600{--text-opacity:1;color:#e02424;color:rgba(224,36,36,var(--text-opacity))}.text-red-700{--text-opacity:1;color:#c81e1e;color:rgba(200,30,30,var(--text-opacity))}.text-orange-500{--text-opacity:1;color:#ff5a1f;color:rgba(255,90,31,var(--text-opacity))}.text-orange-700{--text-opacity:1;color:#b43403;color:rgba(180,52,3,var(--text-opacity))}.text-green-500{--text-opacity:1;color:#0e9f6e;color:rgba(14,159,110,var(--text-opacity))}.text-green-600{--text-opacity:1;color:#057a55;color:rgba(5,122,85,var(--text-opacity))}.text-green-700{--text-opacity:1;color:#046c4e;color:rgba(4,108,78,var(--text-opacity))}.text-teal-500{--text-opacity:1;color:#0694a2;color:rgba(6,148,162,var(--text-opacity))}.text-blue-500{--text-opacity:1;color:#3f83f8;color:rgba(63,131,248,var(--text-opacity))}.text-purple-100{--text-opacity:1;color:#edebfe;color:rgba(237,235,254,var(--text-opacity))}.text-purple-200{--text-opacity:1;color:#dcd7fe;color:rgba(220,215,254,var(--text-opacity))}.text-purple-600{--text-opacity:1;color:#7e3af2;color:rgba(126,58,242,var(--text-opacity))}.focus-within\:text-purple-500:focus-within{--text-opacity:1;color:#9061f9;color:rgba(144,97,249,var(--text-opacity))}.focus-within\:text-purple-600:focus-within{--text-opacity:1;color:#7e3af2;color:rgba(126,58,242,var(--text-opacity))}.hover\:text-gray-700:hover{--text-opacity:1;color:#24262d;color:rgba(36,38,45,var(--text-opacity))}.hover\:text-gray-800:hover{--text-opacity:1;color:#1a1c23;color:rgba(26,28,35,var(--text-opacity))}.active\:text-gray-500:active{--text-opacity:1;color:#707275;color:rgba(112,114,117,var(--text-opacity))}.theme-dark .dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.theme-dark .dark\:text-gray-100{--text-opacity:1;color:#f4f5f7;color:rgba(244,245,247,var(--text-opacity))}.theme-dark .dark\:text-gray-200{--text-opacity:1;color:#e5e7eb;color:rgba(229,231,235,var(--text-opacity))}.theme-dark .dark\:text-gray-300{--text-opacity:1;color:#d5d6d7;color:rgba(213,214,215,var(--text-opacity))}.theme-dark .dark\:text-gray-400{--text-opacity:1;color:#9e9e9e;color:rgba(158,158,158,var(--text-opacity))}.theme-dark .dark\:text-red-100{--text-opacity:1;color:#fde8e8;color:rgba(253,232,232,var(--text-opacity))}.theme-dark .dark\:text-red-400{--text-opacity:1;color:#f98080;color:rgba(249,128,128,var(--text-opacity))}.theme-dark .dark\:text-orange-100{--text-opacity:1;color:#feecdc;color:rgba(254,236,220,var(--text-opacity))}.theme-dark .dark\:text-green-100{--text-opacity:1;color:#def7ec;color:rgba(222,247,236,var(--text-opacity))}.theme-dark .dark\:text-green-400{--text-opacity:1;color:#31c48d;color:rgba(49,196,141,var(--text-opacity))}.theme-dark .dark\:text-teal-100{--text-opacity:1;color:#d5f5f6;color:rgba(213,245,246,var(--text-opacity))}.theme-dark .dark\:text-blue-100{--text-opacity:1;color:#e1effe;color:rgba(225,239,254,var(--text-opacity))}.theme-dark .dark\:text-purple-300{--text-opacity:1;color:#cabffd;color:rgba(202,191,253,var(--text-opacity))}.theme-dark .dark\:text-purple-400{--text-opacity:1;color:#ac94fa;color:rgba(172,148,250,var(--text-opacity))}.theme-dark .dark\:focus-within\:text-purple-400:focus-within{--text-opacity:1;color:#ac94fa;color:rgba(172,148,250,var(--text-opacity))}.theme-dark .dark\:hover\:text-gray-200:hover{--text-opacity:1;color:#e5e7eb;color:rgba(229,231,235,var(--text-opacity))}.uppercase{text-transform:uppercase}.hover\:underline:hover,.underline{text-decoration:underline}.tracking-wide{letter-spacing:.025em}.align-middle{vertical-align:middle}.whitespace-no-wrap{white-space:nowrap}.w-1{width:.25rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-12{width:3rem}.w-56{width:14rem}.w-64{width:16rem}.w-full{width:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.gap-6{grid-gap:1.5rem;gap:1.5rem}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.transform{--transform-translate-x:0;--transform-translate-y:0;--transform-rotate:0;--transform-skew-x:0;--transform-skew-y:0;--transform-scale-x:1;--transform-scale-y:1;transform:translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))}.translate-x-1{--transform-translate-x:0.25rem}.-translate-x-20{--transform-translate-x:-5rem}.-translate-y-1{--transform-translate-y:-0.25rem}.translate-y-1\/2{--transform-translate-y:50%}.transition-all{transition-property:all}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform}.transition-colors{transition-property:background-color,border-color,color,fill,stroke}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-300{transition-duration:.3s}.focus\:shadow-outline-gray:focus{box-shadow:0 0 0 3px rgba(213,214,215,.45)}.focus\:shadow-outline-red:focus{box-shadow:0 0 0 3px rgba(248,180,180,.45)}.focus\:shadow-outline-green:focus{box-shadow:0 0 0 3px rgba(132,225,188,.45)}.focus\:shadow-outline-purple:focus{box-shadow:0 0 0 3px rgba(202,191,253,.45)}.theme-dark .dark\:focus\:shadow-outline-gray:focus{box-shadow:0 0 0 3px rgba(213,214,215,.45)}@media (min-width:640px){.sm\:space-y-0>:not(template)~:not(template){--space-y-reverse:0;margin-top:calc(0px*(1 - var(--space-y-reverse)));margin-bottom:calc(0px*var(--space-y-reverse))}.sm\:space-x-6>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(1.5rem*var(--space-x-reverse));margin-left:calc(1.5rem*(1 - var(--space-x-reverse)))}.sm\:rounded-lg{border-radius:.5rem}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-center{justify-content:center}.sm\:m-4{margin:1rem}.sm\:mt-auto{margin-top:auto}.sm\:max-w-xl{max-width:36rem}.sm\:p-12{padding:3rem}.sm\:py-2{padding-top:.5rem;padding-bottom:.5rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:w-auto{width:auto}.sm\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}}@media (min-width:768px){.md\:space-x-4>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(1rem*var(--space-x-reverse));margin-left:calc(1rem*(1 - var(--space-x-reverse)))}.md\:block{display:block}.md\:hidden{display:none}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:h-auto{height:auto}.md\:w-1\/2{width:50%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:mr-32{margin-right:8rem}}@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
0	2	\ No newline at end of file

html/public/assets/img/create-account-office-dark.jpeg

Diff comments   View file @ 5f2a263

66.4 KB

html/public/assets/img/create-account-office.jpeg

Diff comments   View file @ 5f2a263

73.1 KB

html/public/assets/img/dashboard.png

Diff comments   View file @ 5f2a263

61.1 KB

html/public/assets/img/forgot-password-office-dark.jpeg

Diff comments   View file @ 5f2a263

57.4 KB

html/public/assets/img/forgot-password-office.jpeg

Diff comments   View file @ 5f2a263

89.8 KB

html/public/assets/img/github.svg

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1 @@
	1	+<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
0	2	\ No newline at end of file

html/public/assets/img/login-office-dark.jpeg

Diff comments   View file @ 5f2a263

13.9 KB

html/public/assets/img/login-office.jpeg

Diff comments   View file @ 5f2a263

36.9 KB

html/public/assets/img/twitter.svg

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1 @@
	1	+<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
0	2	\ No newline at end of file

html/public/assets/js/charts-bars.js

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,34 @@
	1	+/**
	2	+ * For usage, visit Chart.js docs https://www.chartjs.org/docs/latest/
	3	+ */
	4	+const barConfig = {
	5	+ type: 'bar',
	6	+ data: {
	7	+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
	8	+ datasets: [
	9	+ {
	10	+ label: 'Shoes',
	11	+ backgroundColor: '#0694a2',
	12	+ // borderColor: window.chartColors.red,
	13	+ borderWidth: 1,
	14	+ data: [-3, 14, 52, 74, 33, 90, 70],
	15	+ },
	16	+ {
	17	+ label: 'Bags',
	18	+ backgroundColor: '#7e3af2',
	19	+ // borderColor: window.chartColors.blue,
	20	+ borderWidth: 1,
	21	+ data: [66, 33, 43, 12, 54, 62, 84],
	22	+ },
	23	+ ],
	24	+ },
	25	+ options: {
	26	+ responsive: true,
	27	+ legend: {
	28	+ display: false,
	29	+ },
	30	+ },
	31	+}
	32	+
	33	+const barsCtx = document.getElementById('bars')
	34	+window.myBar = new Chart(barsCtx, barConfig)

html/public/assets/js/charts-lines.js

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,71 @@
	1	+/**
	2	+ * For usage, visit Chart.js docs https://www.chartjs.org/docs/latest/
	3	+ */
	4	+const lineConfig = {
	5	+ type: 'line',
	6	+ data: {
	7	+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
	8	+ datasets: [
	9	+ {
	10	+ label: 'Organic',
	11	+ /**
	12	+ * These colors come from Tailwind CSS palette
	13	+ * https://tailwindcss.com/docs/customizing-colors/#default-color-palette
	14	+ */
	15	+ backgroundColor: '#0694a2',
	16	+ borderColor: '#0694a2',
	17	+ data: [43, 48, 40, 54, 67, 73, 70],
	18	+ fill: false,
	19	+ },
	20	+ {
	21	+ label: 'Paid',
	22	+ fill: false,
	23	+ /**
	24	+ * These colors come from Tailwind CSS palette
	25	+ * https://tailwindcss.com/docs/customizing-colors/#default-color-palette
	26	+ */
	27	+ backgroundColor: '#7e3af2',
	28	+ borderColor: '#7e3af2',
	29	+ data: [24, 50, 64, 74, 52, 51, 65],
	30	+ },
	31	+ ],
	32	+ },
	33	+ options: {
	34	+ responsive: true,
	35	+ /**
	36	+ * Default legends are ugly and impossible to style.
	37	+ * See examples in charts.html to add your own legends
	38	+ * */
	39	+ legend: {
	40	+ display: false,
	41	+ },
	42	+ tooltips: {
	43	+ mode: 'index',
	44	+ intersect: false,
	45	+ },
	46	+ hover: {
	47	+ mode: 'nearest',
	48	+ intersect: true,
	49	+ },
	50	+ scales: {
	51	+ x: {
	52	+ display: true,
	53	+ scaleLabel: {
	54	+ display: true,
	55	+ labelString: 'Month',
	56	+ },
	57	+ },
	58	+ y: {
	59	+ display: true,
	60	+ scaleLabel: {
	61	+ display: true,
	62	+ labelString: 'Value',
	63	+ },
	64	+ },
	65	+ },
	66	+ },
	67	+}
	68	+
	69	+// change this to the id of your chart element in HMTL
	70	+const lineCtx = document.getElementById('line')
	71	+window.myLine = new Chart(lineCtx, lineConfig)

html/public/assets/js/charts-pie.js

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,35 @@
	1	+/**
	2	+ * For usage, visit Chart.js docs https://www.chartjs.org/docs/latest/
	3	+ */
	4	+const pieConfig = {
	5	+ type: 'doughnut',
	6	+ data: {
	7	+ datasets: [
	8	+ {
	9	+ data: [33, 33, 33],
	10	+ /**
	11	+ * These colors come from Tailwind CSS palette
	12	+ * https://tailwindcss.com/docs/customizing-colors/#default-color-palette
	13	+ */
	14	+ backgroundColor: ['#0694a2', '#1c64f2', '#7e3af2'],
	15	+ label: 'Dataset 1',
	16	+ },
	17	+ ],
	18	+ labels: ['Shoes', 'Shirts', 'Bags'],
	19	+ },
	20	+ options: {
	21	+ responsive: true,
	22	+ cutoutPercentage: 80,
	23	+ /**
	24	+ * Default legends are ugly and impossible to style.
	25	+ * See examples in charts.html to add your own legends
	26	+ * */
	27	+ legend: {
	28	+ display: false,
	29	+ },
	30	+ },
	31	+}
	32	+
	33	+// change this to the id of your chart element in HMTL
	34	+const pieCtx = document.getElementById('pie')
	35	+window.myPie = new Chart(pieCtx, pieConfig)

html/public/assets/js/focus-trap.js

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,51 @@
	1	+/**
	2	+ * Limit focus to focusable elements inside `element`
	3	+ * @param {HTMLElement} element - DOM element to focus trap inside
	4	+ * @return {Function} cleanup function
	5	+ */
	6	+function focusTrap(element) {
	7	+ const focusableElements = getFocusableElements(element)
	8	+ const firstFocusableEl = focusableElements[0]
	9	+ const lastFocusableEl = focusableElements[focusableElements.length - 1]
	10	+
	11	+ // Wait for the case the element was not yet rendered
	12	+ setTimeout(() => firstFocusableEl.focus(), 50)
	13	+
	14	+ /**
	15	+ * Get all focusable elements inside `element`
	16	+ * @param {HTMLElement} element - DOM element to focus trap inside
	17	+ * @return {HTMLElement[]} List of focusable elements
	18	+ */
	19	+ function getFocusableElements(element = document) {
	20	+ return [
	21	+ ...element.querySelectorAll(
	22	+ 'a, button, details, input, select, textarea, [tabindex]:not([tabindex="-1"])'
	23	+ ),
	24	+ ].filter((e) => !e.hasAttribute('disabled'))
	25	+ }
	26	+
	27	+ function handleKeyDown(e) {
	28	+ const TAB = 9
	29	+ const isTab = e.key.toLowerCase() === 'tab' || e.keyCode === TAB
	30	+
	31	+ if (!isTab) return
	32	+
	33	+ if (e.shiftKey) {
	34	+ if (document.activeElement === firstFocusableEl) {
	35	+ lastFocusableEl.focus()
	36	+ e.preventDefault()
	37	+ }
	38	+ } else {
	39	+ if (document.activeElement === lastFocusableEl) {
	40	+ firstFocusableEl.focus()
	41	+ e.preventDefault()
	42	+ }
	43	+ }
	44	+ }
	45	+
	46	+ element.addEventListener('keydown', handleKeyDown)
	47	+
	48	+ return function cleanup() {
	49	+ element.removeEventListener('keydown', handleKeyDown)
	50	+ }
	51	+}

html/public/assets/js/init-alpine.js

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,62 @@
	1	+function data() {
	2	+ function getThemeFromLocalStorage() {
	3	+ // if user already changed the theme, use it
	4	+ if (window.localStorage.getItem('dark')) {
	5	+ return JSON.parse(window.localStorage.getItem('dark'))
	6	+ }
	7	+
	8	+ // else return their preferences
	9	+ return (
	10	+ !!window.matchMedia &&
	11	+ window.matchMedia('(prefers-color-scheme: dark)').matches
	12	+ )
	13	+ }
	14	+
	15	+ function setThemeToLocalStorage(value) {
	16	+ window.localStorage.setItem('dark', value)
	17	+ }
	18	+
	19	+ return {
	20	+ dark: getThemeFromLocalStorage(),
	21	+ toggleTheme() {
	22	+ this.dark = !this.dark
	23	+ setThemeToLocalStorage(this.dark)
	24	+ },
	25	+ isSideMenuOpen: false,
	26	+ toggleSideMenu() {
	27	+ this.isSideMenuOpen = !this.isSideMenuOpen
	28	+ },
	29	+ closeSideMenu() {
	30	+ this.isSideMenuOpen = false
	31	+ },
	32	+ isNotificationsMenuOpen: false,
	33	+ toggleNotificationsMenu() {
	34	+ this.isNotificationsMenuOpen = !this.isNotificationsMenuOpen
	35	+ },
	36	+ closeNotificationsMenu() {
	37	+ this.isNotificationsMenuOpen = false
	38	+ },
	39	+ isProfileMenuOpen: false,
	40	+ toggleProfileMenu() {
	41	+ this.isProfileMenuOpen = !this.isProfileMenuOpen
	42	+ },
	43	+ closeProfileMenu() {
	44	+ this.isProfileMenuOpen = false
	45	+ },
	46	+ isPagesMenuOpen: false,
	47	+ togglePagesMenu() {
	48	+ this.isPagesMenuOpen = !this.isPagesMenuOpen
	49	+ },
	50	+ // Modal
	51	+ isModalOpen: false,
	52	+ trapCleanup: null,
	53	+ openModal() {
	54	+ this.isModalOpen = true
	55	+ this.trapCleanup = focusTrap(document.querySelector('#modal'))
	56	+ },
	57	+ closeModal() {
	58	+ this.isModalOpen = false
	59	+ this.trapCleanup()
	60	+ },
	61	+ }
	62	+}

html/public/buttons.html

Diff comments   View file @ 5f2a263

Changes suppressed. Click to show

...	...	@@ -0,0 +1,1012 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Buttons - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="./assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="./assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div
	20	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	21	+ :class="{ 'overflow-hidden': isSideMenuOpen}"
	22	+ >
	23	+ <!-- Desktop sidebar -->
	24	+ <aside
	25	+ class="z-20 flex-shrink-0 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block"
	26	+ >
	27	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	28	+ <a
	29	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	30	+ href="#"
	31	+ >
	32	+ Windmill
	33	+ </a>
	34	+ <ul class="mt-6">
	35	+ <li class="relative px-6 py-3">
	36	+ <a
	37	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	38	+ href="index.html"
	39	+ >
	40	+ <svg
	41	+ class="w-5 h-5"
	42	+ aria-hidden="true"
	43	+ fill="none"
	44	+ stroke-linecap="round"
	45	+ stroke-linejoin="round"
	46	+ stroke-width="2"
	47	+ viewBox="0 0 24 24"
	48	+ stroke="currentColor"
	49	+ >
	50	+ <path
	51	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	52	+ ></path>
	53	+ </svg>
	54	+ <span class="ml-4">Dashboard</span>
	55	+ </a>
	56	+ </li>
	57	+ </ul>
	58	+ <ul>
	59	+ <li class="relative px-6 py-3">
	60	+ <a
	61	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	62	+ href="forms.html"
	63	+ >
	64	+ <svg
	65	+ class="w-5 h-5"
	66	+ aria-hidden="true"
	67	+ fill="none"
	68	+ stroke-linecap="round"
	69	+ stroke-linejoin="round"
	70	+ stroke-width="2"
	71	+ viewBox="0 0 24 24"
	72	+ stroke="currentColor"
	73	+ >
	74	+ <path
	75	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	76	+ ></path>
	77	+ </svg>
	78	+ <span class="ml-4">Forms</span>
	79	+ </a>
	80	+ </li>
	81	+ <li class="relative px-6 py-3">
	82	+ <a
	83	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	84	+ href="cards.html"
	85	+ >
	86	+ <svg
	87	+ class="w-5 h-5"
	88	+ aria-hidden="true"
	89	+ fill="none"
	90	+ stroke-linecap="round"
	91	+ stroke-linejoin="round"
	92	+ stroke-width="2"
	93	+ viewBox="0 0 24 24"
	94	+ stroke="currentColor"
	95	+ >
	96	+ <path
	97	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	98	+ ></path>
	99	+ </svg>
	100	+ <span class="ml-4">Cards</span>
	101	+ </a>
	102	+ </li>
	103	+ <li class="relative px-6 py-3">
	104	+ <a
	105	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	106	+ href="charts.html"
	107	+ >
	108	+ <svg
	109	+ class="w-5 h-5"
	110	+ aria-hidden="true"
	111	+ fill="none"
	112	+ stroke-linecap="round"
	113	+ stroke-linejoin="round"
	114	+ stroke-width="2"
	115	+ viewBox="0 0 24 24"
	116	+ stroke="currentColor"
	117	+ >
	118	+ <path
	119	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	120	+ ></path>
	121	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	122	+ </svg>
	123	+ <span class="ml-4">Charts</span>
	124	+ </a>
	125	+ </li>
	126	+ <li class="relative px-6 py-3">
	127	+ <span
	128	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	129	+ aria-hidden="true"
	130	+ ></span>
	131	+ <a
	132	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	133	+ href="buttons.html"
	134	+ >
	135	+ <svg
	136	+ class="w-5 h-5"
	137	+ aria-hidden="true"
	138	+ fill="none"
	139	+ stroke-linecap="round"
	140	+ stroke-linejoin="round"
	141	+ stroke-width="2"
	142	+ viewBox="0 0 24 24"
	143	+ stroke="currentColor"
	144	+ >
	145	+ <path
	146	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	147	+ ></path>
	148	+ </svg>
	149	+ <span class="ml-4">Buttons</span>
	150	+ </a>
	151	+ </li>
	152	+ <li class="relative px-6 py-3">
	153	+ <a
	154	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	155	+ href="modals.html"
	156	+ >
	157	+ <svg
	158	+ class="w-5 h-5"
	159	+ aria-hidden="true"
	160	+ fill="none"
	161	+ stroke-linecap="round"
	162	+ stroke-linejoin="round"
	163	+ stroke-width="2"
	164	+ viewBox="0 0 24 24"
	165	+ stroke="currentColor"
	166	+ >
	167	+ <path
	168	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	169	+ ></path>
	170	+ </svg>
	171	+ <span class="ml-4">Modals</span>
	172	+ </a>
	173	+ </li>
	174	+ <li class="relative px-6 py-3">
	175	+ <a
	176	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	177	+ href="tables.html"
	178	+ >
	179	+ <svg
	180	+ class="w-5 h-5"
	181	+ aria-hidden="true"
	182	+ fill="none"
	183	+ stroke-linecap="round"
	184	+ stroke-linejoin="round"
	185	+ stroke-width="2"
	186	+ viewBox="0 0 24 24"
	187	+ stroke="currentColor"
	188	+ >
	189	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	190	+ </svg>
	191	+ <span class="ml-4">Tables</span>
	192	+ </a>
	193	+ </li>
	194	+ <li class="relative px-6 py-3">
	195	+ <button
	196	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	197	+ @click="togglePagesMenu"
	198	+ aria-haspopup="true"
	199	+ >
	200	+ <span class="inline-flex items-center">
	201	+ <svg
	202	+ class="w-5 h-5"
	203	+ aria-hidden="true"
	204	+ fill="none"
	205	+ stroke-linecap="round"
	206	+ stroke-linejoin="round"
	207	+ stroke-width="2"
	208	+ viewBox="0 0 24 24"
	209	+ stroke="currentColor"
	210	+ >
	211	+ <path
	212	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	213	+ ></path>
	214	+ </svg>
	215	+ <span class="ml-4">Pages</span>
	216	+ </span>
	217	+ <svg
	218	+ class="w-4 h-4"
	219	+ aria-hidden="true"
	220	+ fill="currentColor"
	221	+ viewBox="0 0 20 20"
	222	+ >
	223	+ <path
	224	+ fill-rule="evenodd"
	225	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	226	+ clip-rule="evenodd"
	227	+ ></path>
	228	+ </svg>
	229	+ </button>
	230	+ <template x-if="isPagesMenuOpen">
	231	+ <ul
	232	+ x-transition:enter="transition-all ease-in-out duration-300"
	233	+ x-transition:enter-start="opacity-25 max-h-0"
	234	+ x-transition:enter-end="opacity-100 max-h-xl"
	235	+ x-transition:leave="transition-all ease-in-out duration-300"
	236	+ x-transition:leave-start="opacity-100 max-h-xl"
	237	+ x-transition:leave-end="opacity-0 max-h-0"
	238	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	239	+ aria-label="submenu"
	240	+ >
	241	+ <li
	242	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	243	+ >
	244	+ <a class="w-full" href="pages/login.html">Login</a>
	245	+ </li>
	246	+ <li
	247	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	248	+ >
	249	+ <a class="w-full" href="pages/create-account.html">
	250	+ Create account
	251	+ </a>
	252	+ </li>
	253	+ <li
	254	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	255	+ >
	256	+ <a class="w-full" href="pages/forgot-password.html">
	257	+ Forgot password
	258	+ </a>
	259	+ </li>
	260	+ <li
	261	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	262	+ >
	263	+ <a class="w-full" href="pages/404.html">404</a>
	264	+ </li>
	265	+ <li
	266	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	267	+ >
	268	+ <a class="w-full" href="pages/blank.html">Blank</a>
	269	+ </li>
	270	+ </ul>
	271	+ </template>
	272	+ </li>
	273	+ </ul>
	274	+ <div class="px-6 my-6">
	275	+ <button
	276	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	277	+ >
	278	+ Create account
	279	+ <span class="ml-2" aria-hidden="true">+</span>
	280	+ </button>
	281	+ </div>
	282	+ </div>
	283	+ </aside>
	284	+ <!-- Mobile sidebar -->
	285	+ <!-- Backdrop -->
	286	+ <div
	287	+ x-show="isSideMenuOpen"
	288	+ x-transition:enter="transition ease-in-out duration-150"
	289	+ x-transition:enter-start="opacity-0"
	290	+ x-transition:enter-end="opacity-100"
	291	+ x-transition:leave="transition ease-in-out duration-150"
	292	+ x-transition:leave-start="opacity-100"
	293	+ x-transition:leave-end="opacity-0"
	294	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	295	+ ></div>
	296	+ <aside
	297	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	298	+ x-show="isSideMenuOpen"
	299	+ x-transition:enter="transition ease-in-out duration-150"
	300	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	301	+ x-transition:enter-end="opacity-100"
	302	+ x-transition:leave="transition ease-in-out duration-150"
	303	+ x-transition:leave-start="opacity-100"
	304	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	305	+ @click.away="closeSideMenu"
	306	+ @keydown.escape="closeSideMenu"
	307	+ >
	308	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	309	+ <a
	310	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	311	+ href="#"
	312	+ >
	313	+ Windmill
	314	+ </a>
	315	+ <ul class="mt-6">
	316	+ <li class="relative px-6 py-3">
	317	+ <a
	318	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	319	+ href="index.html"
	320	+ >
	321	+ <svg
	322	+ class="w-5 h-5"
	323	+ aria-hidden="true"
	324	+ fill="none"
	325	+ stroke-linecap="round"
	326	+ stroke-linejoin="round"
	327	+ stroke-width="2"
	328	+ viewBox="0 0 24 24"
	329	+ stroke="currentColor"
	330	+ >
	331	+ <path
	332	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	333	+ ></path>
	334	+ </svg>
	335	+ <span class="ml-4">Dashboard</span>
	336	+ </a>
	337	+ </li>
	338	+ </ul>
	339	+ <ul>
	340	+ <li class="relative px-6 py-3">
	341	+ <a
	342	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	343	+ href="forms.html"
	344	+ >
	345	+ <svg
	346	+ class="w-5 h-5"
	347	+ aria-hidden="true"
	348	+ fill="none"
	349	+ stroke-linecap="round"
	350	+ stroke-linejoin="round"
	351	+ stroke-width="2"
	352	+ viewBox="0 0 24 24"
	353	+ stroke="currentColor"
	354	+ >
	355	+ <path
	356	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	357	+ ></path>
	358	+ </svg>
	359	+ <span class="ml-4">Forms</span>
	360	+ </a>
	361	+ </li>
	362	+ <li class="relative px-6 py-3">
	363	+ <a
	364	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	365	+ href="cards.html"
	366	+ >
	367	+ <svg
	368	+ class="w-5 h-5"
	369	+ aria-hidden="true"
	370	+ fill="none"
	371	+ stroke-linecap="round"
	372	+ stroke-linejoin="round"
	373	+ stroke-width="2"
	374	+ viewBox="0 0 24 24"
	375	+ stroke="currentColor"
	376	+ >
	377	+ <path
	378	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	379	+ ></path>
	380	+ </svg>
	381	+ <span class="ml-4">Cards</span>
	382	+ </a>
	383	+ </li>
	384	+ <li class="relative px-6 py-3">
	385	+ <a
	386	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	387	+ href="charts.html"
	388	+ >
	389	+ <svg
	390	+ class="w-5 h-5"
	391	+ aria-hidden="true"
	392	+ fill="none"
	393	+ stroke-linecap="round"
	394	+ stroke-linejoin="round"
	395	+ stroke-width="2"
	396	+ viewBox="0 0 24 24"
	397	+ stroke="currentColor"
	398	+ >
	399	+ <path
	400	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	401	+ ></path>
	402	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	403	+ </svg>
	404	+ <span class="ml-4">Charts</span>
	405	+ </a>
	406	+ </li>
	407	+ <li class="relative px-6 py-3">
	408	+ <span
	409	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	410	+ aria-hidden="true"
	411	+ ></span>
	412	+ <a
	413	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	414	+ href="buttons.html"
	415	+ >
	416	+ <svg
	417	+ class="w-5 h-5"
	418	+ aria-hidden="true"
	419	+ fill="none"
	420	+ stroke-linecap="round"
	421	+ stroke-linejoin="round"
	422	+ stroke-width="2"
	423	+ viewBox="0 0 24 24"
	424	+ stroke="currentColor"
	425	+ >
	426	+ <path
	427	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	428	+ ></path>
	429	+ </svg>
	430	+ <span class="ml-4">Buttons</span>
	431	+ </a>
	432	+ </li>
	433	+ <li class="relative px-6 py-3">
	434	+ <a
	435	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	436	+ href="modals.html"
	437	+ >
	438	+ <svg
	439	+ class="w-5 h-5"
	440	+ aria-hidden="true"
	441	+ fill="none"
	442	+ stroke-linecap="round"
	443	+ stroke-linejoin="round"
	444	+ stroke-width="2"
	445	+ viewBox="0 0 24 24"
	446	+ stroke="currentColor"
	447	+ >
	448	+ <path
	449	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	450	+ ></path>
	451	+ </svg>
	452	+ <span class="ml-4">Modals</span>
	453	+ </a>
	454	+ </li>
	455	+ <li class="relative px-6 py-3">
	456	+ <a
	457	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	458	+ href="tables.html"
	459	+ >
	460	+ <svg
	461	+ class="w-5 h-5"
	462	+ aria-hidden="true"
	463	+ fill="none"
	464	+ stroke-linecap="round"
	465	+ stroke-linejoin="round"
	466	+ stroke-width="2"
	467	+ viewBox="0 0 24 24"
	468	+ stroke="currentColor"
	469	+ >
	470	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	471	+ </svg>
	472	+ <span class="ml-4">Tables</span>
	473	+ </a>
	474	+ </li>
	475	+ <li class="relative px-6 py-3">
	476	+ <button
	477	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	478	+ @click="togglePagesMenu"
	479	+ aria-haspopup="true"
	480	+ >
	481	+ <span class="inline-flex items-center">
	482	+ <svg
	483	+ class="w-5 h-5"
	484	+ aria-hidden="true"
	485	+ fill="none"
	486	+ stroke-linecap="round"
	487	+ stroke-linejoin="round"
	488	+ stroke-width="2"
	489	+ viewBox="0 0 24 24"
	490	+ stroke="currentColor"
	491	+ >
	492	+ <path
	493	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	494	+ ></path>
	495	+ </svg>
	496	+ <span class="ml-4">Pages</span>
	497	+ </span>
	498	+ <svg
	499	+ class="w-4 h-4"
	500	+ aria-hidden="true"
	501	+ fill="currentColor"
	502	+ viewBox="0 0 20 20"
	503	+ >
	504	+ <path
	505	+ fill-rule="evenodd"
	506	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	507	+ clip-rule="evenodd"
	508	+ ></path>
	509	+ </svg>
	510	+ </button>
	511	+ <template x-if="isPagesMenuOpen">
	512	+ <ul
	513	+ x-transition:enter="transition-all ease-in-out duration-300"
	514	+ x-transition:enter-start="opacity-25 max-h-0"
	515	+ x-transition:enter-end="opacity-100 max-h-xl"
	516	+ x-transition:leave="transition-all ease-in-out duration-300"
	517	+ x-transition:leave-start="opacity-100 max-h-xl"
	518	+ x-transition:leave-end="opacity-0 max-h-0"
	519	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	520	+ aria-label="submenu"
	521	+ >
	522	+ <li
	523	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	524	+ >
	525	+ <a class="w-full" href="pages/login.html">Login</a>
	526	+ </li>
	527	+ <li
	528	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	529	+ >
	530	+ <a class="w-full" href="pages/create-account.html">
	531	+ Create account
	532	+ </a>
	533	+ </li>
	534	+ <li
	535	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	536	+ >
	537	+ <a class="w-full" href="pages/forgot-password.html">
	538	+ Forgot password
	539	+ </a>
	540	+ </li>
	541	+ <li
	542	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	543	+ >
	544	+ <a class="w-full" href="pages/404.html">404</a>
	545	+ </li>
	546	+ <li
	547	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	548	+ >
	549	+ <a class="w-full" href="pages/blank.html">Blank</a>
	550	+ </li>
	551	+ </ul>
	552	+ </template>
	553	+ </li>
	554	+ </ul>
	555	+ <div class="px-6 my-6">
	556	+ <button
	557	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	558	+ >
	559	+ Create account
	560	+ <span class="ml-2" aria-hidden="true">+</span>
	561	+ </button>
	562	+ </div>
	563	+ </div>
	564	+ </aside>
	565	+ <div class="flex flex-col flex-1">
	566	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	567	+ <div
	568	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	569	+ >
	570	+ <!-- Mobile hamburger -->
	571	+ <button
	572	+ class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	573	+ @click="toggleSideMenu"
	574	+ aria-label="Menu"
	575	+ >
	576	+ <svg
	577	+ class="w-6 h-6"
	578	+ aria-hidden="true"
	579	+ fill="currentColor"
	580	+ viewBox="0 0 20 20"
	581	+ >
	582	+ <path
	583	+ fill-rule="evenodd"
	584	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	585	+ clip-rule="evenodd"
	586	+ ></path>
	587	+ </svg>
	588	+ </button>
	589	+ <!-- Search input -->
	590	+ <div class="flex justify-center flex-1 lg:mr-32">
	591	+ <div
	592	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	593	+ >
	594	+ <div class="absolute inset-y-0 flex items-center pl-2">
	595	+ <svg
	596	+ class="w-4 h-4"
	597	+ aria-hidden="true"
	598	+ fill="currentColor"
	599	+ viewBox="0 0 20 20"
	600	+ >
	601	+ <path
	602	+ fill-rule="evenodd"
	603	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	604	+ clip-rule="evenodd"
	605	+ ></path>
	606	+ </svg>
	607	+ </div>
	608	+ <input
	609	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	610	+ type="text"
	611	+ placeholder="Search for projects"
	612	+ aria-label="Search"
	613	+ />
	614	+ </div>
	615	+ </div>
	616	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	617	+ <!-- Theme toggler -->
	618	+ <li class="flex">
	619	+ <button
	620	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	621	+ @click="toggleTheme"
	622	+ aria-label="Toggle color mode"
	623	+ >
	624	+ <template x-if="!dark">
	625	+ <svg
	626	+ class="w-5 h-5"
	627	+ aria-hidden="true"
	628	+ fill="currentColor"
	629	+ viewBox="0 0 20 20"
	630	+ >
	631	+ <path
	632	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	633	+ ></path>
	634	+ </svg>
	635	+ </template>
	636	+ <template x-if="dark">
	637	+ <svg
	638	+ class="w-5 h-5"
	639	+ aria-hidden="true"
	640	+ fill="currentColor"
	641	+ viewBox="0 0 20 20"
	642	+ >
	643	+ <path
	644	+ fill-rule="evenodd"
	645	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	646	+ clip-rule="evenodd"
	647	+ ></path>
	648	+ </svg>
	649	+ </template>
	650	+ </button>
	651	+ </li>
	652	+ <!-- Notifications menu -->
	653	+ <li class="relative">
	654	+ <button
	655	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	656	+ @click="toggleNotificationsMenu"
	657	+ @keydown.escape="closeNotificationsMenu"
	658	+ aria-label="Notifications"
	659	+ aria-haspopup="true"
	660	+ >
	661	+ <svg
	662	+ class="w-5 h-5"
	663	+ aria-hidden="true"
	664	+ fill="currentColor"
	665	+ viewBox="0 0 20 20"
	666	+ >
	667	+ <path
	668	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	669	+ ></path>
	670	+ </svg>
	671	+ <!-- Notification badge -->
	672	+ <span
	673	+ aria-hidden="true"
	674	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	675	+ ></span>
	676	+ </button>
	677	+ <template x-if="isNotificationsMenuOpen">
	678	+ <ul
	679	+ x-transition:leave="transition ease-in duration-150"
	680	+ x-transition:leave-start="opacity-100"
	681	+ x-transition:leave-end="opacity-0"
	682	+ @click.away="closeNotificationsMenu"
	683	+ @keydown.escape="closeNotificationsMenu"
	684	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	685	+ aria-label="submenu"
	686	+ >
	687	+ <li class="flex">
	688	+ <a
	689	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	690	+ href="#"
	691	+ >
	692	+ <span>Messages</span>
	693	+ <span
	694	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	695	+ >
	696	+ 13
	697	+ </span>
	698	+ </a>
	699	+ </li>
	700	+ <li class="flex">
	701	+ <a
	702	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	703	+ href="#"
	704	+ >
	705	+ <span>Sales</span>
	706	+ <span
	707	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	708	+ >
	709	+ 2
	710	+ </span>
	711	+ </a>
	712	+ </li>
	713	+ <li class="flex">
	714	+ <a
	715	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	716	+ href="#"
	717	+ >
	718	+ <span>Alerts</span>
	719	+ </a>
	720	+ </li>
	721	+ </ul>
	722	+ </template>
	723	+ </li>
	724	+ <!-- Profile menu -->
	725	+ <li class="relative">
	726	+ <button
	727	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	728	+ @click="toggleProfileMenu"
	729	+ @keydown.escape="closeProfileMenu"
	730	+ aria-label="Account"
	731	+ aria-haspopup="true"
	732	+ >
	733	+ <img
	734	+ class="object-cover w-8 h-8 rounded-full"
	735	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	736	+ alt=""
	737	+ aria-hidden="true"
	738	+ />
	739	+ </button>
	740	+ <template x-if="isProfileMenuOpen">
	741	+ <ul
	742	+ x-transition:leave="transition ease-in duration-150"
	743	+ x-transition:leave-start="opacity-100"
	744	+ x-transition:leave-end="opacity-0"
	745	+ @click.away="closeProfileMenu"
	746	+ @keydown.escape="closeProfileMenu"
	747	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	748	+ aria-label="submenu"
	749	+ >
	750	+ <li class="flex">
	751	+ <a
	752	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	753	+ href="#"
	754	+ >
	755	+ <svg
	756	+ class="w-4 h-4 mr-3"
	757	+ aria-hidden="true"
	758	+ fill="none"
	759	+ stroke-linecap="round"
	760	+ stroke-linejoin="round"
	761	+ stroke-width="2"
	762	+ viewBox="0 0 24 24"
	763	+ stroke="currentColor"
	764	+ >
	765	+ <path
	766	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	767	+ ></path>
	768	+ </svg>
	769	+ <span>Profile</span>
	770	+ </a>
	771	+ </li>
	772	+ <li class="flex">
	773	+ <a
	774	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	775	+ href="#"
	776	+ >
	777	+ <svg
	778	+ class="w-4 h-4 mr-3"
	779	+ aria-hidden="true"
	780	+ fill="none"
	781	+ stroke-linecap="round"
	782	+ stroke-linejoin="round"
	783	+ stroke-width="2"
	784	+ viewBox="0 0 24 24"
	785	+ stroke="currentColor"
	786	+ >
	787	+ <path
	788	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	789	+ ></path>
	790	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	791	+ </svg>
	792	+ <span>Settings</span>
	793	+ </a>
	794	+ </li>
	795	+ <li class="flex">
	796	+ <a
	797	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	798	+ href="#"
	799	+ >
	800	+ <svg
	801	+ class="w-4 h-4 mr-3"
	802	+ aria-hidden="true"
	803	+ fill="none"
	804	+ stroke-linecap="round"
	805	+ stroke-linejoin="round"
	806	+ stroke-width="2"
	807	+ viewBox="0 0 24 24"
	808	+ stroke="currentColor"
	809	+ >
	810	+ <path
	811	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	812	+ ></path>
	813	+ </svg>
	814	+ <span>Log out</span>
	815	+ </a>
	816	+ </li>
	817	+ </ul>
	818	+ </template>
	819	+ </li>
	820	+ </ul>
	821	+ </div>
	822	+ </header>
	823	+ <main class="h-full overflow-y-auto">
	824	+ <div class="container grid px-6 mx-auto">
	825	+ <h2
	826	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	827	+ >
	828	+ Buttons
	829	+ </h2>
	830	+ <!-- CTA -->
	831	+ <a
	832	+ class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
	833	+ href="https://github.com/estevanmaito/windmill-dashboard"
	834	+ >
	835	+ <div class="flex items-center">
	836	+ <svg
	837	+ class="w-5 h-5 mr-2"
	838	+ fill="currentColor"
	839	+ viewBox="0 0 20 20"
	840	+ >
	841	+ <path
	842	+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
	843	+ ></path>
	844	+ </svg>
	845	+ <span>Star this project on GitHub</span>
	846	+ </div>
	847	+ <span>View more &RightArrow;</span>
	848	+ </a>
	849	+
	850	+ <!-- Button sizes -->
	851	+ <h4
	852	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	853	+ >
	854	+ Sizes
	855	+ </h4>
	856	+ <div
	857	+ class="flex flex-col flex-wrap mb-4 space-y-4 md:flex-row md:items-end md:space-x-4"
	858	+ >
	859	+ <!-- Divs are used just to display the examples. Use only the button. -->
	860	+ <div>
	861	+ <button
	862	+ class="px-10 py-4 font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	863	+ >
	864	+ Larger button
	865	+ </button>
	866	+ </div>
	867	+
	868	+ <!-- Divs are used just to display the examples. Use only the button. -->
	869	+ <div>
	870	+ <button
	871	+ class="px-5 py-3 font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	872	+ >
	873	+ Large button
	874	+ </button>
	875	+ </div>
	876	+
	877	+ <!-- Divs are used just to display the examples. Use only the button. -->
	878	+ <div>
	879	+ <button
	880	+ class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	881	+ >
	882	+ Regular
	883	+ </button>
	884	+ </div>
	885	+
	886	+ <!-- Divs are used just to display the examples. Use only the button. -->
	887	+ <div>
	888	+ <!-- For disabled buttons ADD these classes:
	889	+ opacity-50 cursor-not-allowed
	890	+
	891	+ And REMOVE these classes:
	892	+ active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple
	893	+ -->
	894	+ <button
	895	+ class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg opacity-50 cursor-not-allowed focus:outline-none"
	896	+ >
	897	+ Disabled
	898	+ </button>
	899	+ </div>
	900	+
	901	+ <!-- Divs are used just to display the examples. Use only the button. -->
	902	+ <div>
	903	+ <button
	904	+ class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	905	+ >
	906	+ Small
	907	+ </button>
	908	+ </div>
	909	+ </div>
	910	+ <p class="mb-8 text-gray-700 dark:text-gray-400">
	911	+ Apply
	912	+ <code>w-full</code>
	913	+ to any button to create a block level button.
	914	+ </p>
	915	+
	916	+ <!-- Buttons with icons -->
	917	+ <h4
	918	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	919	+ >
	920	+ Icons
	921	+ </h4>
	922	+ <div
	923	+ class="flex flex-col flex-wrap mb-8 space-y-4 md:flex-row md:items-end md:space-x-4"
	924	+ >
	925	+ <!-- Divs are used just to display the examples. Use only the button. -->
	926	+ <div>
	927	+ <button
	928	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	929	+ >
	930	+ <span>Icon right</span>
	931	+ <svg
	932	+ class="w-4 h-4 ml-2 -mr-1"
	933	+ fill="currentColor"
	934	+ aria-hidden="true"
	935	+ viewBox="0 0 20 20"
	936	+ >
	937	+ <path
	938	+ d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
	939	+ clip-rule="evenodd"
	940	+ fill-rule="evenodd"
	941	+ ></path>
	942	+ </svg>
	943	+ </button>
	944	+ </div>
	945	+
	946	+ <!-- Divs are used just to display the examples. Use only the button. -->
	947	+ <div>
	948	+ <button
	949	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	950	+ >
	951	+ <svg
	952	+ class="w-4 h-4 mr-2 -ml-1"
	953	+ fill="currentColor"
	954	+ aria-hidden="true"
	955	+ viewBox="0 0 20 20"
	956	+ >
	957	+ <path
	958	+ d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
	959	+ clip-rule="evenodd"
	960	+ fill-rule="evenodd"
	961	+ ></path>
	962	+ </svg>
	963	+ <span>Icon left</span>
	964	+ </button>
	965	+ </div>
	966	+
	967	+ <!-- Divs are used just to display the examples. Use only the button. -->
	968	+ <div>
	969	+ <button
	970	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	971	+ aria-label="Like"
	972	+ >
	973	+ <svg
	974	+ class="w-5 h-5"
	975	+ aria-hidden="true"
	976	+ fill="currentColor"
	977	+ viewBox="0 0 20 20"
	978	+ >
	979	+ <path
	980	+ d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
	981	+ clip-rule="evenodd"
	982	+ fill-rule="evenodd"
	983	+ ></path>
	984	+ </svg>
	985	+ </button>
	986	+ </div>
	987	+
	988	+ <!-- Divs are used just to display the examples. Use only the button. -->
	989	+ <div>
	990	+ <button
	991	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-full active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	992	+ aria-label="Edit"
	993	+ >
	994	+ <svg
	995	+ class="w-5 h-5"
	996	+ aria-hidden="true"
	997	+ fill="currentColor"
	998	+ viewBox="0 0 20 20"
	999	+ >
	1000	+ <path
	1001	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1002	+ ></path>
	1003	+ </svg>
	1004	+ </button>
	1005	+ </div>
	1006	+ </div>
	1007	+ </div>
	1008	+ </main>
	1009	+ </div>
	1010	+ </div>
	1011	+ </body>
	1012	+</html>

html/public/cards.html

Diff comments   View file @ 5f2a263

Changes suppressed. Click to show

...	...	@@ -0,0 +1,1020 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Cards - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="./assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="./assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div
	20	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	21	+ :class="{ 'overflow-hidden': isSideMenuOpen}"
	22	+ >
	23	+ <!-- Desktop sidebar -->
	24	+ <aside
	25	+ class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0"
	26	+ >
	27	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	28	+ <a
	29	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	30	+ href="#"
	31	+ >
	32	+ Windmill
	33	+ </a>
	34	+ <ul class="mt-6">
	35	+ <li class="relative px-6 py-3">
	36	+ <a
	37	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	38	+ href="index.html"
	39	+ >
	40	+ <svg
	41	+ class="w-5 h-5"
	42	+ aria-hidden="true"
	43	+ fill="none"
	44	+ stroke-linecap="round"
	45	+ stroke-linejoin="round"
	46	+ stroke-width="2"
	47	+ viewBox="0 0 24 24"
	48	+ stroke="currentColor"
	49	+ >
	50	+ <path
	51	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	52	+ ></path>
	53	+ </svg>
	54	+ <span class="ml-4">Dashboard</span>
	55	+ </a>
	56	+ </li>
	57	+ </ul>
	58	+ <ul>
	59	+ <li class="relative px-6 py-3">
	60	+ <a
	61	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	62	+ href="forms.html"
	63	+ >
	64	+ <svg
	65	+ class="w-5 h-5"
	66	+ aria-hidden="true"
	67	+ fill="none"
	68	+ stroke-linecap="round"
	69	+ stroke-linejoin="round"
	70	+ stroke-width="2"
	71	+ viewBox="0 0 24 24"
	72	+ stroke="currentColor"
	73	+ >
	74	+ <path
	75	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	76	+ ></path>
	77	+ </svg>
	78	+ <span class="ml-4">Forms</span>
	79	+ </a>
	80	+ </li>
	81	+ <li class="relative px-6 py-3">
	82	+ <span
	83	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	84	+ aria-hidden="true"
	85	+ ></span>
	86	+ <a
	87	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	88	+ href="cards.html"
	89	+ >
	90	+ <svg
	91	+ class="w-5 h-5"
	92	+ aria-hidden="true"
	93	+ fill="none"
	94	+ stroke-linecap="round"
	95	+ stroke-linejoin="round"
	96	+ stroke-width="2"
	97	+ viewBox="0 0 24 24"
	98	+ stroke="currentColor"
	99	+ >
	100	+ <path
	101	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	102	+ ></path>
	103	+ </svg>
	104	+ <span class="ml-4">Cards</span>
	105	+ </a>
	106	+ </li>
	107	+ <li class="relative px-6 py-3">
	108	+ <a
	109	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	110	+ href="charts.html"
	111	+ >
	112	+ <svg
	113	+ class="w-5 h-5"
	114	+ aria-hidden="true"
	115	+ fill="none"
	116	+ stroke-linecap="round"
	117	+ stroke-linejoin="round"
	118	+ stroke-width="2"
	119	+ viewBox="0 0 24 24"
	120	+ stroke="currentColor"
	121	+ >
	122	+ <path
	123	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	124	+ ></path>
	125	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	126	+ </svg>
	127	+ <span class="ml-4">Charts</span>
	128	+ </a>
	129	+ </li>
	130	+ <li class="relative px-6 py-3">
	131	+ <a
	132	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	133	+ href="buttons.html"
	134	+ >
	135	+ <svg
	136	+ class="w-5 h-5"
	137	+ aria-hidden="true"
	138	+ fill="none"
	139	+ stroke-linecap="round"
	140	+ stroke-linejoin="round"
	141	+ stroke-width="2"
	142	+ viewBox="0 0 24 24"
	143	+ stroke="currentColor"
	144	+ >
	145	+ <path
	146	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	147	+ ></path>
	148	+ </svg>
	149	+ <span class="ml-4">Buttons</span>
	150	+ </a>
	151	+ </li>
	152	+ <li class="relative px-6 py-3">
	153	+ <a
	154	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	155	+ href="modals.html"
	156	+ >
	157	+ <svg
	158	+ class="w-5 h-5"
	159	+ aria-hidden="true"
	160	+ fill="none"
	161	+ stroke-linecap="round"
	162	+ stroke-linejoin="round"
	163	+ stroke-width="2"
	164	+ viewBox="0 0 24 24"
	165	+ stroke="currentColor"
	166	+ >
	167	+ <path
	168	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	169	+ ></path>
	170	+ </svg>
	171	+ <span class="ml-4">Modals</span>
	172	+ </a>
	173	+ </li>
	174	+ <li class="relative px-6 py-3">
	175	+ <a
	176	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	177	+ href="tables.html"
	178	+ >
	179	+ <svg
	180	+ class="w-5 h-5"
	181	+ aria-hidden="true"
	182	+ fill="none"
	183	+ stroke-linecap="round"
	184	+ stroke-linejoin="round"
	185	+ stroke-width="2"
	186	+ viewBox="0 0 24 24"
	187	+ stroke="currentColor"
	188	+ >
	189	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	190	+ </svg>
	191	+ <span class="ml-4">Tables</span>
	192	+ </a>
	193	+ </li>
	194	+ <li class="relative px-6 py-3">
	195	+ <button
	196	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	197	+ @click="togglePagesMenu"
	198	+ aria-haspopup="true"
	199	+ >
	200	+ <span class="inline-flex items-center">
	201	+ <svg
	202	+ class="w-5 h-5"
	203	+ aria-hidden="true"
	204	+ fill="none"
	205	+ stroke-linecap="round"
	206	+ stroke-linejoin="round"
	207	+ stroke-width="2"
	208	+ viewBox="0 0 24 24"
	209	+ stroke="currentColor"
	210	+ >
	211	+ <path
	212	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	213	+ ></path>
	214	+ </svg>
	215	+ <span class="ml-4">Pages</span>
	216	+ </span>
	217	+ <svg
	218	+ class="w-4 h-4"
	219	+ aria-hidden="true"
	220	+ fill="currentColor"
	221	+ viewBox="0 0 20 20"
	222	+ >
	223	+ <path
	224	+ fill-rule="evenodd"
	225	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	226	+ clip-rule="evenodd"
	227	+ ></path>
	228	+ </svg>
	229	+ </button>
	230	+ <template x-if="isPagesMenuOpen">
	231	+ <ul
	232	+ x-transition:enter="transition-all ease-in-out duration-300"
	233	+ x-transition:enter-start="opacity-25 max-h-0"
	234	+ x-transition:enter-end="opacity-100 max-h-xl"
	235	+ x-transition:leave="transition-all ease-in-out duration-300"
	236	+ x-transition:leave-start="opacity-100 max-h-xl"
	237	+ x-transition:leave-end="opacity-0 max-h-0"
	238	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	239	+ aria-label="submenu"
	240	+ >
	241	+ <li
	242	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	243	+ >
	244	+ <a class="w-full" href="pages/login.html">Login</a>
	245	+ </li>
	246	+ <li
	247	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	248	+ >
	249	+ <a class="w-full" href="pages/create-account.html">
	250	+ Create account
	251	+ </a>
	252	+ </li>
	253	+ <li
	254	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	255	+ >
	256	+ <a class="w-full" href="pages/forgot-password.html">
	257	+ Forgot password
	258	+ </a>
	259	+ </li>
	260	+ <li
	261	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	262	+ >
	263	+ <a class="w-full" href="pages/404.html">404</a>
	264	+ </li>
	265	+ <li
	266	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	267	+ >
	268	+ <a class="w-full" href="pages/blank.html">Blank</a>
	269	+ </li>
	270	+ </ul>
	271	+ </template>
	272	+ </li>
	273	+ </ul>
	274	+ <div class="px-6 my-6">
	275	+ <button
	276	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	277	+ >
	278	+ Create account
	279	+ <span class="ml-2" aria-hidden="true">+</span>
	280	+ </button>
	281	+ </div>
	282	+ </div>
	283	+ </aside>
	284	+ <!-- Mobile sidebar -->
	285	+ <!-- Backdrop -->
	286	+ <div
	287	+ x-show="isSideMenuOpen"
	288	+ x-transition:enter="transition ease-in-out duration-150"
	289	+ x-transition:enter-start="opacity-0"
	290	+ x-transition:enter-end="opacity-100"
	291	+ x-transition:leave="transition ease-in-out duration-150"
	292	+ x-transition:leave-start="opacity-100"
	293	+ x-transition:leave-end="opacity-0"
	294	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	295	+ ></div>
	296	+ <aside
	297	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	298	+ x-show="isSideMenuOpen"
	299	+ x-transition:enter="transition ease-in-out duration-150"
	300	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	301	+ x-transition:enter-end="opacity-100"
	302	+ x-transition:leave="transition ease-in-out duration-150"
	303	+ x-transition:leave-start="opacity-100"
	304	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	305	+ @click.away="closeSideMenu"
	306	+ @keydown.escape="closeSideMenu"
	307	+ >
	308	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	309	+ <a
	310	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	311	+ href="#"
	312	+ >
	313	+ Windmill
	314	+ </a>
	315	+ <ul class="mt-6">
	316	+ <li class="relative px-6 py-3">
	317	+ <a
	318	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	319	+ href="index.html"
	320	+ >
	321	+ <svg
	322	+ class="w-5 h-5"
	323	+ aria-hidden="true"
	324	+ fill="none"
	325	+ stroke-linecap="round"
	326	+ stroke-linejoin="round"
	327	+ stroke-width="2"
	328	+ viewBox="0 0 24 24"
	329	+ stroke="currentColor"
	330	+ >
	331	+ <path
	332	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	333	+ ></path>
	334	+ </svg>
	335	+ <span class="ml-4">Dashboard</span>
	336	+ </a>
	337	+ </li>
	338	+ </ul>
	339	+ <ul>
	340	+ <li class="relative px-6 py-3">
	341	+ <a
	342	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	343	+ href="forms.html"
	344	+ >
	345	+ <svg
	346	+ class="w-5 h-5"
	347	+ aria-hidden="true"
	348	+ fill="none"
	349	+ stroke-linecap="round"
	350	+ stroke-linejoin="round"
	351	+ stroke-width="2"
	352	+ viewBox="0 0 24 24"
	353	+ stroke="currentColor"
	354	+ >
	355	+ <path
	356	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	357	+ ></path>
	358	+ </svg>
	359	+ <span class="ml-4">Forms</span>
	360	+ </a>
	361	+ </li>
	362	+ <li class="relative px-6 py-3">
	363	+ <span
	364	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	365	+ aria-hidden="true"
	366	+ ></span>
	367	+ <a
	368	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	369	+ href="cards.html"
	370	+ >
	371	+ <svg
	372	+ class="w-5 h-5"
	373	+ aria-hidden="true"
	374	+ fill="none"
	375	+ stroke-linecap="round"
	376	+ stroke-linejoin="round"
	377	+ stroke-width="2"
	378	+ viewBox="0 0 24 24"
	379	+ stroke="currentColor"
	380	+ >
	381	+ <path
	382	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	383	+ ></path>
	384	+ </svg>
	385	+ <span class="ml-4">Cards</span>
	386	+ </a>
	387	+ </li>
	388	+ <li class="relative px-6 py-3">
	389	+ <a
	390	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	391	+ href="charts.html"
	392	+ >
	393	+ <svg
	394	+ class="w-5 h-5"
	395	+ aria-hidden="true"
	396	+ fill="none"
	397	+ stroke-linecap="round"
	398	+ stroke-linejoin="round"
	399	+ stroke-width="2"
	400	+ viewBox="0 0 24 24"
	401	+ stroke="currentColor"
	402	+ >
	403	+ <path
	404	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	405	+ ></path>
	406	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	407	+ </svg>
	408	+ <span class="ml-4">Charts</span>
	409	+ </a>
	410	+ </li>
	411	+ <li class="relative px-6 py-3">
	412	+ <a
	413	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	414	+ href="buttons.html"
	415	+ >
	416	+ <svg
	417	+ class="w-5 h-5"
	418	+ aria-hidden="true"
	419	+ fill="none"
	420	+ stroke-linecap="round"
	421	+ stroke-linejoin="round"
	422	+ stroke-width="2"
	423	+ viewBox="0 0 24 24"
	424	+ stroke="currentColor"
	425	+ >
	426	+ <path
	427	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	428	+ ></path>
	429	+ </svg>
	430	+ <span class="ml-4">Buttons</span>
	431	+ </a>
	432	+ </li>
	433	+ <li class="relative px-6 py-3">
	434	+ <a
	435	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	436	+ href="modals.html"
	437	+ >
	438	+ <svg
	439	+ class="w-5 h-5"
	440	+ aria-hidden="true"
	441	+ fill="none"
	442	+ stroke-linecap="round"
	443	+ stroke-linejoin="round"
	444	+ stroke-width="2"
	445	+ viewBox="0 0 24 24"
	446	+ stroke="currentColor"
	447	+ >
	448	+ <path
	449	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	450	+ ></path>
	451	+ </svg>
	452	+ <span class="ml-4">Modals</span>
	453	+ </a>
	454	+ </li>
	455	+ <li class="relative px-6 py-3">
	456	+ <a
	457	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	458	+ href="tables.html"
	459	+ >
	460	+ <svg
	461	+ class="w-5 h-5"
	462	+ aria-hidden="true"
	463	+ fill="none"
	464	+ stroke-linecap="round"
	465	+ stroke-linejoin="round"
	466	+ stroke-width="2"
	467	+ viewBox="0 0 24 24"
	468	+ stroke="currentColor"
	469	+ >
	470	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	471	+ </svg>
	472	+ <span class="ml-4">Tables</span>
	473	+ </a>
	474	+ </li>
	475	+ <li class="relative px-6 py-3">
	476	+ <button
	477	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	478	+ @click="togglePagesMenu"
	479	+ aria-haspopup="true"
	480	+ >
	481	+ <span class="inline-flex items-center">
	482	+ <svg
	483	+ class="w-5 h-5"
	484	+ aria-hidden="true"
	485	+ fill="none"
	486	+ stroke-linecap="round"
	487	+ stroke-linejoin="round"
	488	+ stroke-width="2"
	489	+ viewBox="0 0 24 24"
	490	+ stroke="currentColor"
	491	+ >
	492	+ <path
	493	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	494	+ ></path>
	495	+ </svg>
	496	+ <span class="ml-4">Pages</span>
	497	+ </span>
	498	+ <svg
	499	+ class="w-4 h-4"
	500	+ aria-hidden="true"
	501	+ fill="currentColor"
	502	+ viewBox="0 0 20 20"
	503	+ >
	504	+ <path
	505	+ fill-rule="evenodd"
	506	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	507	+ clip-rule="evenodd"
	508	+ ></path>
	509	+ </svg>
	510	+ </button>
	511	+ <template x-if="isPagesMenuOpen">
	512	+ <ul
	513	+ x-transition:enter="transition-all ease-in-out duration-300"
	514	+ x-transition:enter-start="opacity-25 max-h-0"
	515	+ x-transition:enter-end="opacity-100 max-h-xl"
	516	+ x-transition:leave="transition-all ease-in-out duration-300"
	517	+ x-transition:leave-start="opacity-100 max-h-xl"
	518	+ x-transition:leave-end="opacity-0 max-h-0"
	519	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	520	+ aria-label="submenu"
	521	+ >
	522	+ <li
	523	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	524	+ >
	525	+ <a class="w-full" href="pages/login.html">Login</a>
	526	+ </li>
	527	+ <li
	528	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	529	+ >
	530	+ <a class="w-full" href="pages/create-account.html">
	531	+ Create account
	532	+ </a>
	533	+ </li>
	534	+ <li
	535	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	536	+ >
	537	+ <a class="w-full" href="pages/forgot-password.html">
	538	+ Forgot password
	539	+ </a>
	540	+ </li>
	541	+ <li
	542	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	543	+ >
	544	+ <a class="w-full" href="pages/404.html">404</a>
	545	+ </li>
	546	+ <li
	547	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	548	+ >
	549	+ <a class="w-full" href="pages/blank.html">Blank</a>
	550	+ </li>
	551	+ </ul>
	552	+ </template>
	553	+ </li>
	554	+ </ul>
	555	+ <div class="px-6 my-6">
	556	+ <button
	557	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	558	+ >
	559	+ Create account
	560	+ <span class="ml-2" aria-hidden="true">+</span>
	561	+ </button>
	562	+ </div>
	563	+ </div>
	564	+ </aside>
	565	+ <div class="flex flex-col flex-1">
	566	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	567	+ <div
	568	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	569	+ >
	570	+ <!-- Mobile hamburger -->
	571	+ <button
	572	+ class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	573	+ @click="toggleSideMenu"
	574	+ aria-label="Menu"
	575	+ >
	576	+ <svg
	577	+ class="w-6 h-6"
	578	+ aria-hidden="true"
	579	+ fill="currentColor"
	580	+ viewBox="0 0 20 20"
	581	+ >
	582	+ <path
	583	+ fill-rule="evenodd"
	584	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	585	+ clip-rule="evenodd"
	586	+ ></path>
	587	+ </svg>
	588	+ </button>
	589	+ <!-- Search input -->
	590	+ <div class="flex justify-center flex-1 lg:mr-32">
	591	+ <div
	592	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	593	+ >
	594	+ <div class="absolute inset-y-0 flex items-center pl-2">
	595	+ <svg
	596	+ class="w-4 h-4"
	597	+ aria-hidden="true"
	598	+ fill="currentColor"
	599	+ viewBox="0 0 20 20"
	600	+ >
	601	+ <path
	602	+ fill-rule="evenodd"
	603	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	604	+ clip-rule="evenodd"
	605	+ ></path>
	606	+ </svg>
	607	+ </div>
	608	+ <input
	609	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	610	+ type="text"
	611	+ placeholder="Search for projects"
	612	+ aria-label="Search"
	613	+ />
	614	+ </div>
	615	+ </div>
	616	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	617	+ <!-- Theme toggler -->
	618	+ <li class="flex">
	619	+ <button
	620	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	621	+ @click="toggleTheme"
	622	+ aria-label="Toggle color mode"
	623	+ >
	624	+ <template x-if="!dark">
	625	+ <svg
	626	+ class="w-5 h-5"
	627	+ aria-hidden="true"
	628	+ fill="currentColor"
	629	+ viewBox="0 0 20 20"
	630	+ >
	631	+ <path
	632	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	633	+ ></path>
	634	+ </svg>
	635	+ </template>
	636	+ <template x-if="dark">
	637	+ <svg
	638	+ class="w-5 h-5"
	639	+ aria-hidden="true"
	640	+ fill="currentColor"
	641	+ viewBox="0 0 20 20"
	642	+ >
	643	+ <path
	644	+ fill-rule="evenodd"
	645	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	646	+ clip-rule="evenodd"
	647	+ ></path>
	648	+ </svg>
	649	+ </template>
	650	+ </button>
	651	+ </li>
	652	+ <!-- Notifications menu -->
	653	+ <li class="relative">
	654	+ <button
	655	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	656	+ @click="toggleNotificationsMenu"
	657	+ @keydown.escape="closeNotificationsMenu"
	658	+ aria-label="Notifications"
	659	+ aria-haspopup="true"
	660	+ >
	661	+ <svg
	662	+ class="w-5 h-5"
	663	+ aria-hidden="true"
	664	+ fill="currentColor"
	665	+ viewBox="0 0 20 20"
	666	+ >
	667	+ <path
	668	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	669	+ ></path>
	670	+ </svg>
	671	+ <!-- Notification badge -->
	672	+ <span
	673	+ aria-hidden="true"
	674	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	675	+ ></span>
	676	+ </button>
	677	+ <template x-if="isNotificationsMenuOpen">
	678	+ <ul
	679	+ x-transition:leave="transition ease-in duration-150"
	680	+ x-transition:leave-start="opacity-100"
	681	+ x-transition:leave-end="opacity-0"
	682	+ @click.away="closeNotificationsMenu"
	683	+ @keydown.escape="closeNotificationsMenu"
	684	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	685	+ aria-label="submenu"
	686	+ >
	687	+ <li class="flex">
	688	+ <a
	689	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	690	+ href="#"
	691	+ >
	692	+ <span>Messages</span>
	693	+ <span
	694	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	695	+ >
	696	+ 13
	697	+ </span>
	698	+ </a>
	699	+ </li>
	700	+ <li class="flex">
	701	+ <a
	702	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	703	+ href="#"
	704	+ >
	705	+ <span>Sales</span>
	706	+ <span
	707	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	708	+ >
	709	+ 2
	710	+ </span>
	711	+ </a>
	712	+ </li>
	713	+ <li class="flex">
	714	+ <a
	715	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	716	+ href="#"
	717	+ >
	718	+ <span>Alerts</span>
	719	+ </a>
	720	+ </li>
	721	+ </ul>
	722	+ </template>
	723	+ </li>
	724	+ <!-- Profile menu -->
	725	+ <li class="relative">
	726	+ <button
	727	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	728	+ @click="toggleProfileMenu"
	729	+ @keydown.escape="closeProfileMenu"
	730	+ aria-label="Account"
	731	+ aria-haspopup="true"
	732	+ >
	733	+ <img
	734	+ class="object-cover w-8 h-8 rounded-full"
	735	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	736	+ alt=""
	737	+ aria-hidden="true"
	738	+ />
	739	+ </button>
	740	+ <template x-if="isProfileMenuOpen">
	741	+ <ul
	742	+ x-transition:leave="transition ease-in duration-150"
	743	+ x-transition:leave-start="opacity-100"
	744	+ x-transition:leave-end="opacity-0"
	745	+ @click.away="closeProfileMenu"
	746	+ @keydown.escape="closeProfileMenu"
	747	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	748	+ aria-label="submenu"
	749	+ >
	750	+ <li class="flex">
	751	+ <a
	752	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	753	+ href="#"
	754	+ >
	755	+ <svg
	756	+ class="w-4 h-4 mr-3"
	757	+ aria-hidden="true"
	758	+ fill="none"
	759	+ stroke-linecap="round"
	760	+ stroke-linejoin="round"
	761	+ stroke-width="2"
	762	+ viewBox="0 0 24 24"
	763	+ stroke="currentColor"
	764	+ >
	765	+ <path
	766	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	767	+ ></path>
	768	+ </svg>
	769	+ <span>Profile</span>
	770	+ </a>
	771	+ </li>
	772	+ <li class="flex">
	773	+ <a
	774	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	775	+ href="#"
	776	+ >
	777	+ <svg
	778	+ class="w-4 h-4 mr-3"
	779	+ aria-hidden="true"
	780	+ fill="none"
	781	+ stroke-linecap="round"
	782	+ stroke-linejoin="round"
	783	+ stroke-width="2"
	784	+ viewBox="0 0 24 24"
	785	+ stroke="currentColor"
	786	+ >
	787	+ <path
	788	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	789	+ ></path>
	790	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	791	+ </svg>
	792	+ <span>Settings</span>
	793	+ </a>
	794	+ </li>
	795	+ <li class="flex">
	796	+ <a
	797	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	798	+ href="#"
	799	+ >
	800	+ <svg
	801	+ class="w-4 h-4 mr-3"
	802	+ aria-hidden="true"
	803	+ fill="none"
	804	+ stroke-linecap="round"
	805	+ stroke-linejoin="round"
	806	+ stroke-width="2"
	807	+ viewBox="0 0 24 24"
	808	+ stroke="currentColor"
	809	+ >
	810	+ <path
	811	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	812	+ ></path>
	813	+ </svg>
	814	+ <span>Log out</span>
	815	+ </a>
	816	+ </li>
	817	+ </ul>
	818	+ </template>
	819	+ </li>
	820	+ </ul>
	821	+ </div>
	822	+ </header>
	823	+ <main class="h-full pb-16 overflow-y-auto">
	824	+ <div class="container px-6 mx-auto grid">
	825	+ <h2
	826	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	827	+ >
	828	+ Cards
	829	+ </h2>
	830	+ <!-- CTA -->
	831	+ <a
	832	+ class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
	833	+ href="https://github.com/estevanmaito/windmill-dashboard"
	834	+ >
	835	+ <div class="flex items-center">
	836	+ <svg
	837	+ class="w-5 h-5 mr-2"
	838	+ fill="currentColor"
	839	+ viewBox="0 0 20 20"
	840	+ >
	841	+ <path
	842	+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
	843	+ ></path>
	844	+ </svg>
	845	+ <span>Star this project on GitHub</span>
	846	+ </div>
	847	+ <span>View more &RightArrow;</span>
	848	+ </a>
	849	+
	850	+ <!-- Big section cards -->
	851	+ <h4
	852	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	853	+ >
	854	+ Big section cards
	855	+ </h4>
	856	+ <div
	857	+ class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
	858	+ >
	859	+ <p class="text-sm text-gray-600 dark:text-gray-400">
	860	+ Large, full width sections goes here
	861	+ </p>
	862	+ </div>
	863	+
	864	+ <!-- Responsive cards -->
	865	+ <h4
	866	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	867	+ >
	868	+ Responsive cards
	869	+ </h4>
	870	+ <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
	871	+ <!-- Card -->
	872	+ <div
	873	+ class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	874	+ >
	875	+ <div
	876	+ class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500"
	877	+ >
	878	+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
	879	+ <path
	880	+ d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
	881	+ ></path>
	882	+ </svg>
	883	+ </div>
	884	+ <div>
	885	+ <p
	886	+ class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
	887	+ >
	888	+ Total clients
	889	+ </p>
	890	+ <p
	891	+ class="text-lg font-semibold text-gray-700 dark:text-gray-200"
	892	+ >
	893	+ 6389
	894	+ </p>
	895	+ </div>
	896	+ </div>
	897	+ <!-- Card -->
	898	+ <div
	899	+ class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	900	+ >
	901	+ <div
	902	+ class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500"
	903	+ >
	904	+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
	905	+ <path
	906	+ fill-rule="evenodd"
	907	+ d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
	908	+ clip-rule="evenodd"
	909	+ ></path>
	910	+ </svg>
	911	+ </div>
	912	+ <div>
	913	+ <p
	914	+ class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
	915	+ >
	916	+ Account balance
	917	+ </p>
	918	+ <p
	919	+ class="text-lg font-semibold text-gray-700 dark:text-gray-200"
	920	+ >
	921	+ $ 46,760.89
	922	+ </p>
	923	+ </div>
	924	+ </div>
	925	+ <!-- Card -->
	926	+ <div
	927	+ class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	928	+ >
	929	+ <div
	930	+ class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500"
	931	+ >
	932	+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
	933	+ <path
	934	+ d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
	935	+ ></path>
	936	+ </svg>
	937	+ </div>
	938	+ <div>
	939	+ <p
	940	+ class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
	941	+ >
	942	+ New sales
	943	+ </p>
	944	+ <p
	945	+ class="text-lg font-semibold text-gray-700 dark:text-gray-200"
	946	+ >
	947	+ 376
	948	+ </p>
	949	+ </div>
	950	+ </div>
	951	+ <!-- Card -->
	952	+ <div
	953	+ class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	954	+ >
	955	+ <div
	956	+ class="p-3 mr-4 text-teal-500 bg-teal-100 rounded-full dark:text-teal-100 dark:bg-teal-500"
	957	+ >
	958	+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
	959	+ <path
	960	+ fill-rule="evenodd"
	961	+ d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
	962	+ clip-rule="evenodd"
	963	+ ></path>
	964	+ </svg>
	965	+ </div>
	966	+ <div>
	967	+ <p
	968	+ class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
	969	+ >
	970	+ Pending contacts
	971	+ </p>
	972	+ <p
	973	+ class="text-lg font-semibold text-gray-700 dark:text-gray-200"
	974	+ >
	975	+ 35
	976	+ </p>
	977	+ </div>
	978	+ </div>
	979	+ </div>
	980	+
	981	+ <!-- Cards with title -->
	982	+ <h4
	983	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	984	+ >
	985	+ Cards with title
	986	+ </h4>
	987	+ <div class="grid gap-6 mb-8 md:grid-cols-2">
	988	+ <div
	989	+ class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	990	+ >
	991	+ <h4 class="mb-4 font-semibold text-gray-600 dark:text-gray-300">
	992	+ Revenue
	993	+ </h4>
	994	+ <p class="text-gray-600 dark:text-gray-400">
	995	+ Lorem ipsum dolor sit, amet consectetur adipisicing elit.
	996	+ Fuga, cum commodi a omnis numquam quod? Totam exercitationem
	997	+ quos hic ipsam at qui cum numquam, sed amet ratione! Ratione,
	998	+ nihil dolorum.
	999	+ </p>
	1000	+ </div>
	1001	+ <div
	1002	+ class="min-w-0 p-4 text-white bg-purple-600 rounded-lg shadow-xs"
	1003	+ >
	1004	+ <h4 class="mb-4 font-semibold">
	1005	+ Colored card
	1006	+ </h4>
	1007	+ <p>
	1008	+ Lorem ipsum dolor sit, amet consectetur adipisicing elit.
	1009	+ Fuga, cum commodi a omnis numquam quod? Totam exercitationem
	1010	+ quos hic ipsam at qui cum numquam, sed amet ratione! Ratione,
	1011	+ nihil dolorum.
	1012	+ </p>
	1013	+ </div>
	1014	+ </div>
	1015	+ </div>
	1016	+ </main>
	1017	+ </div>
	1018	+ </div>
	1019	+ </body>
	1020	+</html>

html/public/charts.html

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,965 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Charts - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="./assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="./assets/js/init-alpine.js"></script>
	17	+ <link
	18	+ rel="stylesheet"
	19	+ href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
	20	+ />
	21	+ <script
	22	+ src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
	23	+ defer
	24	+ ></script>
	25	+ <script src="./assets/js/charts-lines.js" defer></script>
	26	+ <script src="./assets/js/charts-pie.js" defer></script>
	27	+ <script src="./assets/js/charts-bars.js" defer></script>
	28	+ </head>
	29	+ <body>
	30	+ <div
	31	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	32	+ :class="{ 'overflow-hidden': isSideMenuOpen}"
	33	+ >
	34	+ <!-- Desktop sidebar -->
	35	+ <aside
	36	+ class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0"
	37	+ >
	38	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	39	+ <a
	40	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	41	+ href="#"
	42	+ >
	43	+ Windmill
	44	+ </a>
	45	+ <ul class="mt-6">
	46	+ <li class="relative px-6 py-3">
	47	+ <a
	48	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	49	+ href="index.html"
	50	+ >
	51	+ <svg
	52	+ class="w-5 h-5"
	53	+ aria-hidden="true"
	54	+ fill="none"
	55	+ stroke-linecap="round"
	56	+ stroke-linejoin="round"
	57	+ stroke-width="2"
	58	+ viewBox="0 0 24 24"
	59	+ stroke="currentColor"
	60	+ >
	61	+ <path
	62	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	63	+ ></path>
	64	+ </svg>
	65	+ <span class="ml-4">Dashboard</span>
	66	+ </a>
	67	+ </li>
	68	+ </ul>
	69	+ <ul>
	70	+ <li class="relative px-6 py-3">
	71	+ <a
	72	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	73	+ href="forms.html"
	74	+ >
	75	+ <svg
	76	+ class="w-5 h-5"
	77	+ aria-hidden="true"
	78	+ fill="none"
	79	+ stroke-linecap="round"
	80	+ stroke-linejoin="round"
	81	+ stroke-width="2"
	82	+ viewBox="0 0 24 24"
	83	+ stroke="currentColor"
	84	+ >
	85	+ <path
	86	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	87	+ ></path>
	88	+ </svg>
	89	+ <span class="ml-4">Forms</span>
	90	+ </a>
	91	+ </li>
	92	+ <li class="relative px-6 py-3">
	93	+ <a
	94	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	95	+ href="cards.html"
	96	+ >
	97	+ <svg
	98	+ class="w-5 h-5"
	99	+ aria-hidden="true"
	100	+ fill="none"
	101	+ stroke-linecap="round"
	102	+ stroke-linejoin="round"
	103	+ stroke-width="2"
	104	+ viewBox="0 0 24 24"
	105	+ stroke="currentColor"
	106	+ >
	107	+ <path
	108	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	109	+ ></path>
	110	+ </svg>
	111	+ <span class="ml-4">Cards</span>
	112	+ </a>
	113	+ </li>
	114	+ <li class="relative px-6 py-3">
	115	+ <span
	116	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	117	+ aria-hidden="true"
	118	+ ></span>
	119	+ <a
	120	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	121	+ href="charts.html"
	122	+ >
	123	+ <svg
	124	+ class="w-5 h-5"
	125	+ aria-hidden="true"
	126	+ fill="none"
	127	+ stroke-linecap="round"
	128	+ stroke-linejoin="round"
	129	+ stroke-width="2"
	130	+ viewBox="0 0 24 24"
	131	+ stroke="currentColor"
	132	+ >
	133	+ <path
	134	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	135	+ ></path>
	136	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	137	+ </svg>
	138	+ <span class="ml-4">Charts</span>
	139	+ </a>
	140	+ </li>
	141	+ <li class="relative px-6 py-3">
	142	+ <a
	143	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	144	+ href="buttons.html"
	145	+ >
	146	+ <svg
	147	+ class="w-5 h-5"
	148	+ aria-hidden="true"
	149	+ fill="none"
	150	+ stroke-linecap="round"
	151	+ stroke-linejoin="round"
	152	+ stroke-width="2"
	153	+ viewBox="0 0 24 24"
	154	+ stroke="currentColor"
	155	+ >
	156	+ <path
	157	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	158	+ ></path>
	159	+ </svg>
	160	+ <span class="ml-4">Buttons</span>
	161	+ </a>
	162	+ </li>
	163	+ <li class="relative px-6 py-3">
	164	+ <a
	165	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	166	+ href="modals.html"
	167	+ >
	168	+ <svg
	169	+ class="w-5 h-5"
	170	+ aria-hidden="true"
	171	+ fill="none"
	172	+ stroke-linecap="round"
	173	+ stroke-linejoin="round"
	174	+ stroke-width="2"
	175	+ viewBox="0 0 24 24"
	176	+ stroke="currentColor"
	177	+ >
	178	+ <path
	179	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	180	+ ></path>
	181	+ </svg>
	182	+ <span class="ml-4">Modals</span>
	183	+ </a>
	184	+ </li>
	185	+ <li class="relative px-6 py-3">
	186	+ <a
	187	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	188	+ href="tables.html"
	189	+ >
	190	+ <svg
	191	+ class="w-5 h-5"
	192	+ aria-hidden="true"
	193	+ fill="none"
	194	+ stroke-linecap="round"
	195	+ stroke-linejoin="round"
	196	+ stroke-width="2"
	197	+ viewBox="0 0 24 24"
	198	+ stroke="currentColor"
	199	+ >
	200	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	201	+ </svg>
	202	+ <span class="ml-4">Tables</span>
	203	+ </a>
	204	+ </li>
	205	+ <li class="relative px-6 py-3">
	206	+ <button
	207	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	208	+ @click="togglePagesMenu"
	209	+ aria-haspopup="true"
	210	+ >
	211	+ <span class="inline-flex items-center">
	212	+ <svg
	213	+ class="w-5 h-5"
	214	+ aria-hidden="true"
	215	+ fill="none"
	216	+ stroke-linecap="round"
	217	+ stroke-linejoin="round"
	218	+ stroke-width="2"
	219	+ viewBox="0 0 24 24"
	220	+ stroke="currentColor"
	221	+ >
	222	+ <path
	223	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	224	+ ></path>
	225	+ </svg>
	226	+ <span class="ml-4">Pages</span>
	227	+ </span>
	228	+ <svg
	229	+ class="w-4 h-4"
	230	+ aria-hidden="true"
	231	+ fill="currentColor"
	232	+ viewBox="0 0 20 20"
	233	+ >
	234	+ <path
	235	+ fill-rule="evenodd"
	236	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	237	+ clip-rule="evenodd"
	238	+ ></path>
	239	+ </svg>
	240	+ </button>
	241	+ <template x-if="isPagesMenuOpen">
	242	+ <ul
	243	+ x-transition:enter="transition-all ease-in-out duration-300"
	244	+ x-transition:enter-start="opacity-25 max-h-0"
	245	+ x-transition:enter-end="opacity-100 max-h-xl"
	246	+ x-transition:leave="transition-all ease-in-out duration-300"
	247	+ x-transition:leave-start="opacity-100 max-h-xl"
	248	+ x-transition:leave-end="opacity-0 max-h-0"
	249	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	250	+ aria-label="submenu"
	251	+ >
	252	+ <li
	253	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	254	+ >
	255	+ <a class="w-full" href="pages/login.html">Login</a>
	256	+ </li>
	257	+ <li
	258	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	259	+ >
	260	+ <a class="w-full" href="pages/create-account.html">
	261	+ Create account
	262	+ </a>
	263	+ </li>
	264	+ <li
	265	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	266	+ >
	267	+ <a class="w-full" href="pages/forgot-password.html">
	268	+ Forgot password
	269	+ </a>
	270	+ </li>
	271	+ <li
	272	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	273	+ >
	274	+ <a class="w-full" href="pages/404.html">404</a>
	275	+ </li>
	276	+ <li
	277	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	278	+ >
	279	+ <a class="w-full" href="pages/blank.html">Blank</a>
	280	+ </li>
	281	+ </ul>
	282	+ </template>
	283	+ </li>
	284	+ </ul>
	285	+ <div class="px-6 my-6">
	286	+ <button
	287	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	288	+ >
	289	+ Create account
	290	+ <span class="ml-2" aria-hidden="true">+</span>
	291	+ </button>
	292	+ </div>
	293	+ </div>
	294	+ </aside>
	295	+ <!-- Mobile sidebar -->
	296	+ <!-- Backdrop -->
	297	+ <div
	298	+ x-show="isSideMenuOpen"
	299	+ x-transition:enter="transition ease-in-out duration-150"
	300	+ x-transition:enter-start="opacity-0"
	301	+ x-transition:enter-end="opacity-100"
	302	+ x-transition:leave="transition ease-in-out duration-150"
	303	+ x-transition:leave-start="opacity-100"
	304	+ x-transition:leave-end="opacity-0"
	305	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	306	+ ></div>
	307	+ <aside
	308	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	309	+ x-show="isSideMenuOpen"
	310	+ x-transition:enter="transition ease-in-out duration-150"
	311	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	312	+ x-transition:enter-end="opacity-100"
	313	+ x-transition:leave="transition ease-in-out duration-150"
	314	+ x-transition:leave-start="opacity-100"
	315	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	316	+ @click.away="closeSideMenu"
	317	+ @keydown.escape="closeSideMenu"
	318	+ >
	319	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	320	+ <a
	321	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	322	+ href="#"
	323	+ >
	324	+ Windmill
	325	+ </a>
	326	+ <ul class="mt-6">
	327	+ <li class="relative px-6 py-3">
	328	+ <a
	329	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	330	+ href="index.html"
	331	+ >
	332	+ <svg
	333	+ class="w-5 h-5"
	334	+ aria-hidden="true"
	335	+ fill="none"
	336	+ stroke-linecap="round"
	337	+ stroke-linejoin="round"
	338	+ stroke-width="2"
	339	+ viewBox="0 0 24 24"
	340	+ stroke="currentColor"
	341	+ >
	342	+ <path
	343	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	344	+ ></path>
	345	+ </svg>
	346	+ <span class="ml-4">Dashboard</span>
	347	+ </a>
	348	+ </li>
	349	+ </ul>
	350	+ <ul>
	351	+ <li class="relative px-6 py-3">
	352	+ <a
	353	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	354	+ href="forms.html"
	355	+ >
	356	+ <svg
	357	+ class="w-5 h-5"
	358	+ aria-hidden="true"
	359	+ fill="none"
	360	+ stroke-linecap="round"
	361	+ stroke-linejoin="round"
	362	+ stroke-width="2"
	363	+ viewBox="0 0 24 24"
	364	+ stroke="currentColor"
	365	+ >
	366	+ <path
	367	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	368	+ ></path>
	369	+ </svg>
	370	+ <span class="ml-4">Forms</span>
	371	+ </a>
	372	+ </li>
	373	+ <li class="relative px-6 py-3">
	374	+ <a
	375	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	376	+ href="cards.html"
	377	+ >
	378	+ <svg
	379	+ class="w-5 h-5"
	380	+ aria-hidden="true"
	381	+ fill="none"
	382	+ stroke-linecap="round"
	383	+ stroke-linejoin="round"
	384	+ stroke-width="2"
	385	+ viewBox="0 0 24 24"
	386	+ stroke="currentColor"
	387	+ >
	388	+ <path
	389	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	390	+ ></path>
	391	+ </svg>
	392	+ <span class="ml-4">Cards</span>
	393	+ </a>
	394	+ </li>
	395	+ <li class="relative px-6 py-3">
	396	+ <span
	397	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	398	+ aria-hidden="true"
	399	+ ></span>
	400	+ <a
	401	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	402	+ href="charts.html"
	403	+ >
	404	+ <svg
	405	+ class="w-5 h-5"
	406	+ aria-hidden="true"
	407	+ fill="none"
	408	+ stroke-linecap="round"
	409	+ stroke-linejoin="round"
	410	+ stroke-width="2"
	411	+ viewBox="0 0 24 24"
	412	+ stroke="currentColor"
	413	+ >
	414	+ <path
	415	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	416	+ ></path>
	417	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	418	+ </svg>
	419	+ <span class="ml-4">Charts</span>
	420	+ </a>
	421	+ </li>
	422	+ <li class="relative px-6 py-3">
	423	+ <a
	424	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	425	+ href="buttons.html"
	426	+ >
	427	+ <svg
	428	+ class="w-5 h-5"
	429	+ aria-hidden="true"
	430	+ fill="none"
	431	+ stroke-linecap="round"
	432	+ stroke-linejoin="round"
	433	+ stroke-width="2"
	434	+ viewBox="0 0 24 24"
	435	+ stroke="currentColor"
	436	+ >
	437	+ <path
	438	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	439	+ ></path>
	440	+ </svg>
	441	+ <span class="ml-4">Buttons</span>
	442	+ </a>
	443	+ </li>
	444	+ <li class="relative px-6 py-3">
	445	+ <a
	446	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	447	+ href="modals.html"
	448	+ >
	449	+ <svg
	450	+ class="w-5 h-5"
	451	+ aria-hidden="true"
	452	+ fill="none"
	453	+ stroke-linecap="round"
	454	+ stroke-linejoin="round"
	455	+ stroke-width="2"
	456	+ viewBox="0 0 24 24"
	457	+ stroke="currentColor"
	458	+ >
	459	+ <path
	460	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	461	+ ></path>
	462	+ </svg>
	463	+ <span class="ml-4">Modals</span>
	464	+ </a>
	465	+ </li>
	466	+ <li class="relative px-6 py-3">
	467	+ <a
	468	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	469	+ href="tables.html"
	470	+ >
	471	+ <svg
	472	+ class="w-5 h-5"
	473	+ aria-hidden="true"
	474	+ fill="none"
	475	+ stroke-linecap="round"
	476	+ stroke-linejoin="round"
	477	+ stroke-width="2"
	478	+ viewBox="0 0 24 24"
	479	+ stroke="currentColor"
	480	+ >
	481	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	482	+ </svg>
	483	+ <span class="ml-4">Tables</span>
	484	+ </a>
	485	+ </li>
	486	+ <li class="relative px-6 py-3">
	487	+ <button
	488	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	489	+ @click="togglePagesMenu"
	490	+ aria-haspopup="true"
	491	+ >
	492	+ <span class="inline-flex items-center">
	493	+ <svg
	494	+ class="w-5 h-5"
	495	+ aria-hidden="true"
	496	+ fill="none"
	497	+ stroke-linecap="round"
	498	+ stroke-linejoin="round"
	499	+ stroke-width="2"
	500	+ viewBox="0 0 24 24"
	501	+ stroke="currentColor"
	502	+ >
	503	+ <path
	504	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	505	+ ></path>
	506	+ </svg>
	507	+ <span class="ml-4">Pages</span>
	508	+ </span>
	509	+ <svg
	510	+ class="w-4 h-4"
	511	+ aria-hidden="true"
	512	+ fill="currentColor"
	513	+ viewBox="0 0 20 20"
	514	+ >
	515	+ <path
	516	+ fill-rule="evenodd"
	517	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	518	+ clip-rule="evenodd"
	519	+ ></path>
	520	+ </svg>
	521	+ </button>
	522	+ <template x-if="isPagesMenuOpen">
	523	+ <ul
	524	+ x-transition:enter="transition-all ease-in-out duration-300"
	525	+ x-transition:enter-start="opacity-25 max-h-0"
	526	+ x-transition:enter-end="opacity-100 max-h-xl"
	527	+ x-transition:leave="transition-all ease-in-out duration-300"
	528	+ x-transition:leave-start="opacity-100 max-h-xl"
	529	+ x-transition:leave-end="opacity-0 max-h-0"
	530	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	531	+ aria-label="submenu"
	532	+ >
	533	+ <li
	534	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	535	+ >
	536	+ <a class="w-full" href="pages/login.html">Login</a>
	537	+ </li>
	538	+ <li
	539	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	540	+ >
	541	+ <a class="w-full" href="pages/create-account.html">
	542	+ Create account
	543	+ </a>
	544	+ </li>
	545	+ <li
	546	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	547	+ >
	548	+ <a class="w-full" href="pages/forgot-password.html">
	549	+ Forgot password
	550	+ </a>
	551	+ </li>
	552	+ <li
	553	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	554	+ >
	555	+ <a class="w-full" href="pages/404.html">404</a>
	556	+ </li>
	557	+ <li
	558	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	559	+ >
	560	+ <a class="w-full" href="pages/blank.html">Blank</a>
	561	+ </li>
	562	+ </ul>
	563	+ </template>
	564	+ </li>
	565	+ </ul>
	566	+ <div class="px-6 my-6">
	567	+ <button
	568	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	569	+ >
	570	+ Create account
	571	+ <span class="ml-2" aria-hidden="true">+</span>
	572	+ </button>
	573	+ </div>
	574	+ </div>
	575	+ </aside>
	576	+ <div class="flex flex-col flex-1">
	577	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	578	+ <div
	579	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	580	+ >
	581	+ <!-- Mobile hamburger -->
	582	+ <button
	583	+ class="p-1 -ml-1 mr-5 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	584	+ @click="toggleSideMenu"
	585	+ aria-label="Menu"
	586	+ >
	587	+ <svg
	588	+ class="w-6 h-6"
	589	+ aria-hidden="true"
	590	+ fill="currentColor"
	591	+ viewBox="0 0 20 20"
	592	+ >
	593	+ <path
	594	+ fill-rule="evenodd"
	595	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	596	+ clip-rule="evenodd"
	597	+ ></path>
	598	+ </svg>
	599	+ </button>
	600	+ <!-- Search input -->
	601	+ <div class="flex justify-center flex-1 lg:mr-32">
	602	+ <div
	603	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	604	+ >
	605	+ <div class="absolute inset-y-0 flex items-center pl-2">
	606	+ <svg
	607	+ class="w-4 h-4"
	608	+ aria-hidden="true"
	609	+ fill="currentColor"
	610	+ viewBox="0 0 20 20"
	611	+ >
	612	+ <path
	613	+ fill-rule="evenodd"
	614	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	615	+ clip-rule="evenodd"
	616	+ ></path>
	617	+ </svg>
	618	+ </div>
	619	+ <input
	620	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	621	+ type="text"
	622	+ placeholder="Search for projects"
	623	+ aria-label="Search"
	624	+ />
	625	+ </div>
	626	+ </div>
	627	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	628	+ <!-- Theme toggler -->
	629	+ <li class="flex">
	630	+ <button
	631	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	632	+ @click="toggleTheme"
	633	+ aria-label="Toggle color mode"
	634	+ >
	635	+ <template x-if="!dark">
	636	+ <svg
	637	+ class="w-5 h-5"
	638	+ aria-hidden="true"
	639	+ fill="currentColor"
	640	+ viewBox="0 0 20 20"
	641	+ >
	642	+ <path
	643	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	644	+ ></path>
	645	+ </svg>
	646	+ </template>
	647	+ <template x-if="dark">
	648	+ <svg
	649	+ class="w-5 h-5"
	650	+ aria-hidden="true"
	651	+ fill="currentColor"
	652	+ viewBox="0 0 20 20"
	653	+ >
	654	+ <path
	655	+ fill-rule="evenodd"
	656	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	657	+ clip-rule="evenodd"
	658	+ ></path>
	659	+ </svg>
	660	+ </template>
	661	+ </button>
	662	+ </li>
	663	+ <!-- Notifications menu -->
	664	+ <li class="relative">
	665	+ <button
	666	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	667	+ @click="toggleNotificationsMenu"
	668	+ @keydown.escape="closeNotificationsMenu"
	669	+ aria-label="Notifications"
	670	+ aria-haspopup="true"
	671	+ >
	672	+ <svg
	673	+ class="w-5 h-5"
	674	+ aria-hidden="true"
	675	+ fill="currentColor"
	676	+ viewBox="0 0 20 20"
	677	+ >
	678	+ <path
	679	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	680	+ ></path>
	681	+ </svg>
	682	+ <!-- Notification badge -->
	683	+ <span
	684	+ aria-hidden="true"
	685	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	686	+ ></span>
	687	+ </button>
	688	+ <template x-if="isNotificationsMenuOpen">
	689	+ <ul
	690	+ x-transition:leave="transition ease-in duration-150"
	691	+ x-transition:leave-start="opacity-100"
	692	+ x-transition:leave-end="opacity-0"
	693	+ @click.away="closeNotificationsMenu"
	694	+ @keydown.escape="closeNotificationsMenu"
	695	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	696	+ aria-label="submenu"
	697	+ >
	698	+ <li class="flex">
	699	+ <a
	700	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	701	+ href="#"
	702	+ >
	703	+ <span>Messages</span>
	704	+ <span
	705	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	706	+ >
	707	+ 13
	708	+ </span>
	709	+ </a>
	710	+ </li>
	711	+ <li class="flex">
	712	+ <a
	713	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	714	+ href="#"
	715	+ >
	716	+ <span>Sales</span>
	717	+ <span
	718	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	719	+ >
	720	+ 2
	721	+ </span>
	722	+ </a>
	723	+ </li>
	724	+ <li class="flex">
	725	+ <a
	726	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	727	+ href="#"
	728	+ >
	729	+ <span>Alerts</span>
	730	+ </a>
	731	+ </li>
	732	+ </ul>
	733	+ </template>
	734	+ </li>
	735	+ <!-- Profile menu -->
	736	+ <li class="relative">
	737	+ <button
	738	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	739	+ @click="toggleProfileMenu"
	740	+ @keydown.escape="closeProfileMenu"
	741	+ aria-label="Account"
	742	+ aria-haspopup="true"
	743	+ >
	744	+ <img
	745	+ class="object-cover w-8 h-8 rounded-full"
	746	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	747	+ alt=""
	748	+ aria-hidden="true"
	749	+ />
	750	+ </button>
	751	+ <template x-if="isProfileMenuOpen">
	752	+ <ul
	753	+ x-transition:leave="transition ease-in duration-150"
	754	+ x-transition:leave-start="opacity-100"
	755	+ x-transition:leave-end="opacity-0"
	756	+ @click.away="closeProfileMenu"
	757	+ @keydown.escape="closeProfileMenu"
	758	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	759	+ aria-label="submenu"
	760	+ >
	761	+ <li class="flex">
	762	+ <a
	763	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	764	+ href="#"
	765	+ >
	766	+ <svg
	767	+ class="w-4 h-4 mr-3"
	768	+ aria-hidden="true"
	769	+ fill="none"
	770	+ stroke-linecap="round"
	771	+ stroke-linejoin="round"
	772	+ stroke-width="2"
	773	+ viewBox="0 0 24 24"
	774	+ stroke="currentColor"
	775	+ >
	776	+ <path
	777	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	778	+ ></path>
	779	+ </svg>
	780	+ <span>Profile</span>
	781	+ </a>
	782	+ </li>
	783	+ <li class="flex">
	784	+ <a
	785	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	786	+ href="#"
	787	+ >
	788	+ <svg
	789	+ class="w-4 h-4 mr-3"
	790	+ aria-hidden="true"
	791	+ fill="none"
	792	+ stroke-linecap="round"
	793	+ stroke-linejoin="round"
	794	+ stroke-width="2"
	795	+ viewBox="0 0 24 24"
	796	+ stroke="currentColor"
	797	+ >
	798	+ <path
	799	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	800	+ ></path>
	801	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	802	+ </svg>
	803	+ <span>Settings</span>
	804	+ </a>
	805	+ </li>
	806	+ <li class="flex">
	807	+ <a
	808	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	809	+ href="#"
	810	+ >
	811	+ <svg
	812	+ class="w-4 h-4 mr-3"
	813	+ aria-hidden="true"
	814	+ fill="none"
	815	+ stroke-linecap="round"
	816	+ stroke-linejoin="round"
	817	+ stroke-width="2"
	818	+ viewBox="0 0 24 24"
	819	+ stroke="currentColor"
	820	+ >
	821	+ <path
	822	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	823	+ ></path>
	824	+ </svg>
	825	+ <span>Log out</span>
	826	+ </a>
	827	+ </li>
	828	+ </ul>
	829	+ </template>
	830	+ </li>
	831	+ </ul>
	832	+ </div>
	833	+ </header>
	834	+ <main class="h-full pb-16 overflow-y-auto">
	835	+ <div class="container px-6 mx-auto grid">
	836	+ <h2
	837	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	838	+ >
	839	+ Charts
	840	+ </h2>
	841	+ <!-- CTA -->
	842	+ <a
	843	+ class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
	844	+ href="https://github.com/estevanmaito/windmill-dashboard"
	845	+ >
	846	+ <div class="flex items-center">
	847	+ <svg
	848	+ class="w-5 h-5 mr-2"
	849	+ fill="currentColor"
	850	+ viewBox="0 0 20 20"
	851	+ >
	852	+ <path
	853	+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
	854	+ ></path>
	855	+ </svg>
	856	+ <span>Star this project on GitHub</span>
	857	+ </div>
	858	+ <span>View more &RightArrow;</span>
	859	+ </a>
	860	+
	861	+ <p class="mb-8 text-gray-600 dark:text-gray-400">
	862	+ Charts are provided by
	863	+ <a
	864	+ class="text-purple-600 dark:text-purple-400 hover:underline"
	865	+ href="https://www.chartjs.org/"
	866	+ >
	867	+ Chart.js
	868	+ </a>
	869	+ . Note that the default legends are disabled and you should
	870	+ provide a description for your charts in HTML. See source code for
	871	+ examples.
	872	+ </p>
	873	+
	874	+ <div class="grid gap-6 mb-8 md:grid-cols-2">
	875	+ <!-- Doughnut/Pie chart -->
	876	+ <div
	877	+ class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	878	+ >
	879	+ <h4 class="mb-4 font-semibold text-gray-800 dark:text-gray-300">
	880	+ Doughnut/Pie
	881	+ </h4>
	882	+ <canvas id="pie"></canvas>
	883	+ <div
	884	+ class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400"
	885	+ >
	886	+ <!-- Chart legend -->
	887	+ <div class="flex items-center">
	888	+ <span
	889	+ class="inline-block w-3 h-3 mr-1 bg-blue-600 rounded-full"
	890	+ ></span>
	891	+ <span>Shirts</span>
	892	+ </div>
	893	+ <div class="flex items-center">
	894	+ <span
	895	+ class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"
	896	+ ></span>
	897	+ <span>Shoes</span>
	898	+ </div>
	899	+ <div class="flex items-center">
	900	+ <span
	901	+ class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"
	902	+ ></span>
	903	+ <span>Bags</span>
	904	+ </div>
	905	+ </div>
	906	+ </div>
	907	+ <!-- Lines chart -->
	908	+ <div
	909	+ class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	910	+ >
	911	+ <h4 class="mb-4 font-semibold text-gray-800 dark:text-gray-300">
	912	+ Lines
	913	+ </h4>
	914	+ <canvas id="line"></canvas>
	915	+ <div
	916	+ class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400"
	917	+ >
	918	+ <!-- Chart legend -->
	919	+ <div class="flex items-center">
	920	+ <span
	921	+ class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"
	922	+ ></span>
	923	+ <span>Organic</span>
	924	+ </div>
	925	+ <div class="flex items-center">
	926	+ <span
	927	+ class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"
	928	+ ></span>
	929	+ <span>Paid</span>
	930	+ </div>
	931	+ </div>
	932	+ </div>
	933	+ <!-- Bars chart -->
	934	+ <div
	935	+ class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	936	+ >
	937	+ <h4 class="mb-4 font-semibold text-gray-800 dark:text-gray-300">
	938	+ Bars
	939	+ </h4>
	940	+ <canvas id="bars"></canvas>
	941	+ <div
	942	+ class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400"
	943	+ >
	944	+ <!-- Chart legend -->
	945	+ <div class="flex items-center">
	946	+ <span
	947	+ class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"
	948	+ ></span>
	949	+ <span>Shoes</span>
	950	+ </div>
	951	+ <div class="flex items-center">
	952	+ <span
	953	+ class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"
	954	+ ></span>
	955	+ <span>Bags</span>
	956	+ </div>
	957	+ </div>
	958	+ </div>
	959	+ </div>
	960	+ </div>
	961	+ </main>
	962	+ </div>
	963	+ </div>
	964	+ </body>
	965	+</html>

html/public/forms.html

Diff comments   View file @ 5f2a263

Changes suppressed. Click to show

...	...	@@ -0,0 +1,1124 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Windmill Dashboard - Forms</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="./assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="./assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div
	20	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	21	+ :class="{ 'overflow-hidden': isSideMenuOpen}"
	22	+ >
	23	+ <!-- Desktop sidebar -->
	24	+ <aside
	25	+ class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0"
	26	+ >
	27	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	28	+ <a
	29	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	30	+ href="#"
	31	+ >
	32	+ Windmill
	33	+ </a>
	34	+ <ul class="mt-6">
	35	+ <li class="relative px-6 py-3">
	36	+ <a
	37	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	38	+ href="index.html"
	39	+ >
	40	+ <svg
	41	+ class="w-5 h-5"
	42	+ aria-hidden="true"
	43	+ fill="none"
	44	+ stroke-linecap="round"
	45	+ stroke-linejoin="round"
	46	+ stroke-width="2"
	47	+ viewBox="0 0 24 24"
	48	+ stroke="currentColor"
	49	+ >
	50	+ <path
	51	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	52	+ ></path>
	53	+ </svg>
	54	+ <span class="ml-4">Dashboard</span>
	55	+ </a>
	56	+ </li>
	57	+ </ul>
	58	+ <ul>
	59	+ <li class="relative px-6 py-3">
	60	+ <span
	61	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	62	+ aria-hidden="true"
	63	+ ></span>
	64	+ <a
	65	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	66	+ href="forms.html"
	67	+ >
	68	+ <svg
	69	+ class="w-5 h-5"
	70	+ aria-hidden="true"
	71	+ fill="none"
	72	+ stroke-linecap="round"
	73	+ stroke-linejoin="round"
	74	+ stroke-width="2"
	75	+ viewBox="0 0 24 24"
	76	+ stroke="currentColor"
	77	+ >
	78	+ <path
	79	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	80	+ ></path>
	81	+ </svg>
	82	+ <span class="ml-4">Forms</span>
	83	+ </a>
	84	+ </li>
	85	+ <li class="relative px-6 py-3">
	86	+ <a
	87	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	88	+ href="cards.html"
	89	+ >
	90	+ <svg
	91	+ class="w-5 h-5"
	92	+ aria-hidden="true"
	93	+ fill="none"
	94	+ stroke-linecap="round"
	95	+ stroke-linejoin="round"
	96	+ stroke-width="2"
	97	+ viewBox="0 0 24 24"
	98	+ stroke="currentColor"
	99	+ >
	100	+ <path
	101	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	102	+ ></path>
	103	+ </svg>
	104	+ <span class="ml-4">Cards</span>
	105	+ </a>
	106	+ </li>
	107	+ <li class="relative px-6 py-3">
	108	+ <a
	109	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	110	+ href="charts.html"
	111	+ >
	112	+ <svg
	113	+ class="w-5 h-5"
	114	+ aria-hidden="true"
	115	+ fill="none"
	116	+ stroke-linecap="round"
	117	+ stroke-linejoin="round"
	118	+ stroke-width="2"
	119	+ viewBox="0 0 24 24"
	120	+ stroke="currentColor"
	121	+ >
	122	+ <path
	123	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	124	+ ></path>
	125	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	126	+ </svg>
	127	+ <span class="ml-4">Charts</span>
	128	+ </a>
	129	+ </li>
	130	+ <li class="relative px-6 py-3">
	131	+ <a
	132	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	133	+ href="buttons.html"
	134	+ >
	135	+ <svg
	136	+ class="w-5 h-5"
	137	+ aria-hidden="true"
	138	+ fill="none"
	139	+ stroke-linecap="round"
	140	+ stroke-linejoin="round"
	141	+ stroke-width="2"
	142	+ viewBox="0 0 24 24"
	143	+ stroke="currentColor"
	144	+ >
	145	+ <path
	146	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	147	+ ></path>
	148	+ </svg>
	149	+ <span class="ml-4">Buttons</span>
	150	+ </a>
	151	+ </li>
	152	+ <li class="relative px-6 py-3">
	153	+ <a
	154	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	155	+ href="modals.html"
	156	+ >
	157	+ <svg
	158	+ class="w-5 h-5"
	159	+ aria-hidden="true"
	160	+ fill="none"
	161	+ stroke-linecap="round"
	162	+ stroke-linejoin="round"
	163	+ stroke-width="2"
	164	+ viewBox="0 0 24 24"
	165	+ stroke="currentColor"
	166	+ >
	167	+ <path
	168	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	169	+ ></path>
	170	+ </svg>
	171	+ <span class="ml-4">Modals</span>
	172	+ </a>
	173	+ </li>
	174	+ <li class="relative px-6 py-3">
	175	+ <a
	176	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	177	+ href="tables.html"
	178	+ >
	179	+ <svg
	180	+ class="w-5 h-5"
	181	+ aria-hidden="true"
	182	+ fill="none"
	183	+ stroke-linecap="round"
	184	+ stroke-linejoin="round"
	185	+ stroke-width="2"
	186	+ viewBox="0 0 24 24"
	187	+ stroke="currentColor"
	188	+ >
	189	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	190	+ </svg>
	191	+ <span class="ml-4">Tables</span>
	192	+ </a>
	193	+ </li>
	194	+ <li class="relative px-6 py-3">
	195	+ <button
	196	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	197	+ @click="togglePagesMenu"
	198	+ aria-haspopup="true"
	199	+ >
	200	+ <span class="inline-flex items-center">
	201	+ <svg
	202	+ class="w-5 h-5"
	203	+ aria-hidden="true"
	204	+ fill="none"
	205	+ stroke-linecap="round"
	206	+ stroke-linejoin="round"
	207	+ stroke-width="2"
	208	+ viewBox="0 0 24 24"
	209	+ stroke="currentColor"
	210	+ >
	211	+ <path
	212	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	213	+ ></path>
	214	+ </svg>
	215	+ <span class="ml-4">Pages</span>
	216	+ </span>
	217	+ <svg
	218	+ class="w-4 h-4"
	219	+ aria-hidden="true"
	220	+ fill="currentColor"
	221	+ viewBox="0 0 20 20"
	222	+ >
	223	+ <path
	224	+ fill-rule="evenodd"
	225	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	226	+ clip-rule="evenodd"
	227	+ ></path>
	228	+ </svg>
	229	+ </button>
	230	+ <template x-if="isPagesMenuOpen">
	231	+ <ul
	232	+ x-transition:enter="transition-all ease-in-out duration-300"
	233	+ x-transition:enter-start="opacity-25 max-h-0"
	234	+ x-transition:enter-end="opacity-100 max-h-xl"
	235	+ x-transition:leave="transition-all ease-in-out duration-300"
	236	+ x-transition:leave-start="opacity-100 max-h-xl"
	237	+ x-transition:leave-end="opacity-0 max-h-0"
	238	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	239	+ aria-label="submenu"
	240	+ >
	241	+ <li
	242	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	243	+ >
	244	+ <a class="w-full" href="pages/login.html">Login</a>
	245	+ </li>
	246	+ <li
	247	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	248	+ >
	249	+ <a class="w-full" href="pages/create-account.html">
	250	+ Create account
	251	+ </a>
	252	+ </li>
	253	+ <li
	254	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	255	+ >
	256	+ <a class="w-full" href="pages/forgot-password.html">
	257	+ Forgot password
	258	+ </a>
	259	+ </li>
	260	+ <li
	261	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	262	+ >
	263	+ <a class="w-full" href="pages/404.html">404</a>
	264	+ </li>
	265	+ <li
	266	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	267	+ >
	268	+ <a class="w-full" href="pages/blank.html">Blank</a>
	269	+ </li>
	270	+ </ul>
	271	+ </template>
	272	+ </li>
	273	+ </ul>
	274	+ <div class="px-6 my-6">
	275	+ <button
	276	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	277	+ >
	278	+ Create account
	279	+ <span class="ml-2" aria-hidden="true">+</span>
	280	+ </button>
	281	+ </div>
	282	+ </div>
	283	+ </aside>
	284	+ <!-- Mobile sidebar -->
	285	+ <!-- Backdrop -->
	286	+ <div
	287	+ x-show="isSideMenuOpen"
	288	+ x-transition:enter="transition ease-in-out duration-150"
	289	+ x-transition:enter-start="opacity-0"
	290	+ x-transition:enter-end="opacity-100"
	291	+ x-transition:leave="transition ease-in-out duration-150"
	292	+ x-transition:leave-start="opacity-100"
	293	+ x-transition:leave-end="opacity-0"
	294	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	295	+ ></div>
	296	+ <aside
	297	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	298	+ x-show="isSideMenuOpen"
	299	+ x-transition:enter="transition ease-in-out duration-150"
	300	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	301	+ x-transition:enter-end="opacity-100"
	302	+ x-transition:leave="transition ease-in-out duration-150"
	303	+ x-transition:leave-start="opacity-100"
	304	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	305	+ @click.away="closeSideMenu"
	306	+ @keydown.escape="closeSideMenu"
	307	+ >
	308	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	309	+ <a
	310	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	311	+ href="#"
	312	+ >
	313	+ Windmill
	314	+ </a>
	315	+ <ul class="mt-6">
	316	+ <li class="relative px-6 py-3">
	317	+ <a
	318	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	319	+ href="index.html"
	320	+ >
	321	+ <svg
	322	+ class="w-5 h-5"
	323	+ aria-hidden="true"
	324	+ fill="none"
	325	+ stroke-linecap="round"
	326	+ stroke-linejoin="round"
	327	+ stroke-width="2"
	328	+ viewBox="0 0 24 24"
	329	+ stroke="currentColor"
	330	+ >
	331	+ <path
	332	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	333	+ ></path>
	334	+ </svg>
	335	+ <span class="ml-4">Dashboard</span>
	336	+ </a>
	337	+ </li>
	338	+ </ul>
	339	+ <ul>
	340	+ <li class="relative px-6 py-3">
	341	+ <span
	342	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	343	+ aria-hidden="true"
	344	+ ></span>
	345	+ <a
	346	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	347	+ href="forms.html"
	348	+ >
	349	+ <svg
	350	+ class="w-5 h-5"
	351	+ aria-hidden="true"
	352	+ fill="none"
	353	+ stroke-linecap="round"
	354	+ stroke-linejoin="round"
	355	+ stroke-width="2"
	356	+ viewBox="0 0 24 24"
	357	+ stroke="currentColor"
	358	+ >
	359	+ <path
	360	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	361	+ ></path>
	362	+ </svg>
	363	+ <span class="ml-4">Forms</span>
	364	+ </a>
	365	+ </li>
	366	+ <li class="relative px-6 py-3">
	367	+ <a
	368	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	369	+ href="cards.html"
	370	+ >
	371	+ <svg
	372	+ class="w-5 h-5"
	373	+ aria-hidden="true"
	374	+ fill="none"
	375	+ stroke-linecap="round"
	376	+ stroke-linejoin="round"
	377	+ stroke-width="2"
	378	+ viewBox="0 0 24 24"
	379	+ stroke="currentColor"
	380	+ >
	381	+ <path
	382	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	383	+ ></path>
	384	+ </svg>
	385	+ <span class="ml-4">Cards</span>
	386	+ </a>
	387	+ </li>
	388	+ <li class="relative px-6 py-3">
	389	+ <a
	390	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	391	+ href="charts.html"
	392	+ >
	393	+ <svg
	394	+ class="w-5 h-5"
	395	+ aria-hidden="true"
	396	+ fill="none"
	397	+ stroke-linecap="round"
	398	+ stroke-linejoin="round"
	399	+ stroke-width="2"
	400	+ viewBox="0 0 24 24"
	401	+ stroke="currentColor"
	402	+ >
	403	+ <path
	404	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	405	+ ></path>
	406	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	407	+ </svg>
	408	+ <span class="ml-4">Charts</span>
	409	+ </a>
	410	+ </li>
	411	+ <li class="relative px-6 py-3">
	412	+ <a
	413	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	414	+ href="buttons.html"
	415	+ >
	416	+ <svg
	417	+ class="w-5 h-5"
	418	+ aria-hidden="true"
	419	+ fill="none"
	420	+ stroke-linecap="round"
	421	+ stroke-linejoin="round"
	422	+ stroke-width="2"
	423	+ viewBox="0 0 24 24"
	424	+ stroke="currentColor"
	425	+ >
	426	+ <path
	427	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	428	+ ></path>
	429	+ </svg>
	430	+ <span class="ml-4">Buttons</span>
	431	+ </a>
	432	+ </li>
	433	+ <li class="relative px-6 py-3">
	434	+ <a
	435	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	436	+ href="modals.html"
	437	+ >
	438	+ <svg
	439	+ class="w-5 h-5"
	440	+ aria-hidden="true"
	441	+ fill="none"
	442	+ stroke-linecap="round"
	443	+ stroke-linejoin="round"
	444	+ stroke-width="2"
	445	+ viewBox="0 0 24 24"
	446	+ stroke="currentColor"
	447	+ >
	448	+ <path
	449	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	450	+ ></path>
	451	+ </svg>
	452	+ <span class="ml-4">Modals</span>
	453	+ </a>
	454	+ </li>
	455	+ <li class="relative px-6 py-3">
	456	+ <a
	457	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	458	+ href="tables.html"
	459	+ >
	460	+ <svg
	461	+ class="w-5 h-5"
	462	+ aria-hidden="true"
	463	+ fill="none"
	464	+ stroke-linecap="round"
	465	+ stroke-linejoin="round"
	466	+ stroke-width="2"
	467	+ viewBox="0 0 24 24"
	468	+ stroke="currentColor"
	469	+ >
	470	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	471	+ </svg>
	472	+ <span class="ml-4">Tables</span>
	473	+ </a>
	474	+ </li>
	475	+ <li class="relative px-6 py-3">
	476	+ <button
	477	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	478	+ @click="togglePagesMenu"
	479	+ aria-haspopup="true"
	480	+ >
	481	+ <span class="inline-flex items-center">
	482	+ <svg
	483	+ class="w-5 h-5"
	484	+ aria-hidden="true"
	485	+ fill="none"
	486	+ stroke-linecap="round"
	487	+ stroke-linejoin="round"
	488	+ stroke-width="2"
	489	+ viewBox="0 0 24 24"
	490	+ stroke="currentColor"
	491	+ >
	492	+ <path
	493	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	494	+ ></path>
	495	+ </svg>
	496	+ <span class="ml-4">Pages</span>
	497	+ </span>
	498	+ <svg
	499	+ class="w-4 h-4"
	500	+ aria-hidden="true"
	501	+ fill="currentColor"
	502	+ viewBox="0 0 20 20"
	503	+ >
	504	+ <path
	505	+ fill-rule="evenodd"
	506	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	507	+ clip-rule="evenodd"
	508	+ ></path>
	509	+ </svg>
	510	+ </button>
	511	+ <template x-if="isPagesMenuOpen">
	512	+ <ul
	513	+ x-transition:enter="transition-all ease-in-out duration-300"
	514	+ x-transition:enter-start="opacity-25 max-h-0"
	515	+ x-transition:enter-end="opacity-100 max-h-xl"
	516	+ x-transition:leave="transition-all ease-in-out duration-300"
	517	+ x-transition:leave-start="opacity-100 max-h-xl"
	518	+ x-transition:leave-end="opacity-0 max-h-0"
	519	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	520	+ aria-label="submenu"
	521	+ >
	522	+ <li
	523	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	524	+ >
	525	+ <a class="w-full" href="pages/login.html">Login</a>
	526	+ </li>
	527	+ <li
	528	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	529	+ >
	530	+ <a class="w-full" href="pages/create-account.html">
	531	+ Create account
	532	+ </a>
	533	+ </li>
	534	+ <li
	535	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	536	+ >
	537	+ <a class="w-full" href="pages/forgot-password.html">
	538	+ Forgot password
	539	+ </a>
	540	+ </li>
	541	+ <li
	542	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	543	+ >
	544	+ <a class="w-full" href="pages/404.html">404</a>
	545	+ </li>
	546	+ <li
	547	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	548	+ >
	549	+ <a class="w-full" href="pages/blank.html">Blank</a>
	550	+ </li>
	551	+ </ul>
	552	+ </template>
	553	+ </li>
	554	+ </ul>
	555	+ <div class="px-6 my-6">
	556	+ <button
	557	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	558	+ >
	559	+ Create account
	560	+ <span class="ml-2" aria-hidden="true">+</span>
	561	+ </button>
	562	+ </div>
	563	+ </div>
	564	+ </aside>
	565	+ <div class="flex flex-col flex-1">
	566	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	567	+ <div
	568	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	569	+ >
	570	+ <!-- Mobile hamburger -->
	571	+ <button
	572	+ class="p-1 -ml-1 mr-5 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	573	+ @click="toggleSideMenu"
	574	+ aria-label="Menu"
	575	+ >
	576	+ <svg
	577	+ class="w-6 h-6"
	578	+ aria-hidden="true"
	579	+ fill="currentColor"
	580	+ viewBox="0 0 20 20"
	581	+ >
	582	+ <path
	583	+ fill-rule="evenodd"
	584	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	585	+ clip-rule="evenodd"
	586	+ ></path>
	587	+ </svg>
	588	+ </button>
	589	+ <!-- Search input -->
	590	+ <div class="flex justify-center flex-1 lg:mr-32">
	591	+ <div
	592	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	593	+ >
	594	+ <div class="absolute inset-y-0 flex items-center pl-2">
	595	+ <svg
	596	+ class="w-4 h-4"
	597	+ aria-hidden="true"
	598	+ fill="currentColor"
	599	+ viewBox="0 0 20 20"
	600	+ >
	601	+ <path
	602	+ fill-rule="evenodd"
	603	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	604	+ clip-rule="evenodd"
	605	+ ></path>
	606	+ </svg>
	607	+ </div>
	608	+ <input
	609	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	610	+ type="text"
	611	+ placeholder="Search for projects"
	612	+ aria-label="Search"
	613	+ />
	614	+ </div>
	615	+ </div>
	616	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	617	+ <!-- Theme toggler -->
	618	+ <li class="flex">
	619	+ <button
	620	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	621	+ @click="toggleTheme"
	622	+ aria-label="Toggle color mode"
	623	+ >
	624	+ <template x-if="!dark">
	625	+ <svg
	626	+ class="w-5 h-5"
	627	+ aria-hidden="true"
	628	+ fill="currentColor"
	629	+ viewBox="0 0 20 20"
	630	+ >
	631	+ <path
	632	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	633	+ ></path>
	634	+ </svg>
	635	+ </template>
	636	+ <template x-if="dark">
	637	+ <svg
	638	+ class="w-5 h-5"
	639	+ aria-hidden="true"
	640	+ fill="currentColor"
	641	+ viewBox="0 0 20 20"
	642	+ >
	643	+ <path
	644	+ fill-rule="evenodd"
	645	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	646	+ clip-rule="evenodd"
	647	+ ></path>
	648	+ </svg>
	649	+ </template>
	650	+ </button>
	651	+ </li>
	652	+ <!-- Notifications menu -->
	653	+ <li class="relative">
	654	+ <button
	655	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	656	+ @click="toggleNotificationsMenu"
	657	+ @keydown.escape="closeNotificationsMenu"
	658	+ aria-label="Notifications"
	659	+ aria-haspopup="true"
	660	+ >
	661	+ <svg
	662	+ class="w-5 h-5"
	663	+ aria-hidden="true"
	664	+ fill="currentColor"
	665	+ viewBox="0 0 20 20"
	666	+ >
	667	+ <path
	668	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	669	+ ></path>
	670	+ </svg>
	671	+ <!-- Notification badge -->
	672	+ <span
	673	+ aria-hidden="true"
	674	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	675	+ ></span>
	676	+ </button>
	677	+ <template x-if="isNotificationsMenuOpen">
	678	+ <ul
	679	+ x-transition:leave="transition ease-in duration-150"
	680	+ x-transition:leave-start="opacity-100"
	681	+ x-transition:leave-end="opacity-0"
	682	+ @click.away="closeNotificationsMenu"
	683	+ @keydown.escape="closeNotificationsMenu"
	684	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	685	+ aria-label="submenu"
	686	+ >
	687	+ <li class="flex">
	688	+ <a
	689	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	690	+ href="#"
	691	+ >
	692	+ <span>Messages</span>
	693	+ <span
	694	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	695	+ >
	696	+ 13
	697	+ </span>
	698	+ </a>
	699	+ </li>
	700	+ <li class="flex">
	701	+ <a
	702	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	703	+ href="#"
	704	+ >
	705	+ <span>Sales</span>
	706	+ <span
	707	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	708	+ >
	709	+ 2
	710	+ </span>
	711	+ </a>
	712	+ </li>
	713	+ <li class="flex">
	714	+ <a
	715	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	716	+ href="#"
	717	+ >
	718	+ <span>Alerts</span>
	719	+ </a>
	720	+ </li>
	721	+ </ul>
	722	+ </template>
	723	+ </li>
	724	+ <!-- Profile menu -->
	725	+ <li class="relative">
	726	+ <button
	727	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	728	+ @click="toggleProfileMenu"
	729	+ @keydown.escape="closeProfileMenu"
	730	+ aria-label="Account"
	731	+ aria-haspopup="true"
	732	+ >
	733	+ <img
	734	+ class="object-cover w-8 h-8 rounded-full"
	735	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	736	+ alt=""
	737	+ aria-hidden="true"
	738	+ />
	739	+ </button>
	740	+ <template x-if="isProfileMenuOpen">
	741	+ <ul
	742	+ x-transition:leave="transition ease-in duration-150"
	743	+ x-transition:leave-start="opacity-100"
	744	+ x-transition:leave-end="opacity-0"
	745	+ @click.away="closeProfileMenu"
	746	+ @keydown.escape="closeProfileMenu"
	747	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	748	+ aria-label="submenu"
	749	+ >
	750	+ <li class="flex">
	751	+ <a
	752	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	753	+ href="#"
	754	+ >
	755	+ <svg
	756	+ class="w-4 h-4 mr-3"
	757	+ aria-hidden="true"
	758	+ fill="none"
	759	+ stroke-linecap="round"
	760	+ stroke-linejoin="round"
	761	+ stroke-width="2"
	762	+ viewBox="0 0 24 24"
	763	+ stroke="currentColor"
	764	+ >
	765	+ <path
	766	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	767	+ ></path>
	768	+ </svg>
	769	+ <span>Profile</span>
	770	+ </a>
	771	+ </li>
	772	+ <li class="flex">
	773	+ <a
	774	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	775	+ href="#"
	776	+ >
	777	+ <svg
	778	+ class="w-4 h-4 mr-3"
	779	+ aria-hidden="true"
	780	+ fill="none"
	781	+ stroke-linecap="round"
	782	+ stroke-linejoin="round"
	783	+ stroke-width="2"
	784	+ viewBox="0 0 24 24"
	785	+ stroke="currentColor"
	786	+ >
	787	+ <path
	788	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	789	+ ></path>
	790	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	791	+ </svg>
	792	+ <span>Settings</span>
	793	+ </a>
	794	+ </li>
	795	+ <li class="flex">
	796	+ <a
	797	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	798	+ href="#"
	799	+ >
	800	+ <svg
	801	+ class="w-4 h-4 mr-3"
	802	+ aria-hidden="true"
	803	+ fill="none"
	804	+ stroke-linecap="round"
	805	+ stroke-linejoin="round"
	806	+ stroke-width="2"
	807	+ viewBox="0 0 24 24"
	808	+ stroke="currentColor"
	809	+ >
	810	+ <path
	811	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	812	+ ></path>
	813	+ </svg>
	814	+ <span>Log out</span>
	815	+ </a>
	816	+ </li>
	817	+ </ul>
	818	+ </template>
	819	+ </li>
	820	+ </ul>
	821	+ </div>
	822	+ </header>
	823	+ <main class="h-full pb-16 overflow-y-auto">
	824	+ <div class="container px-6 mx-auto grid">
	825	+ <h2
	826	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	827	+ >
	828	+ Forms
	829	+ </h2>
	830	+ <!-- CTA -->
	831	+ <a
	832	+ class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
	833	+ href="https://github.com/estevanmaito/windmill-dashboard"
	834	+ >
	835	+ <div class="flex items-center">
	836	+ <svg
	837	+ class="w-5 h-5 mr-2"
	838	+ fill="currentColor"
	839	+ viewBox="0 0 20 20"
	840	+ >
	841	+ <path
	842	+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
	843	+ ></path>
	844	+ </svg>
	845	+ <span>Star this project on GitHub</span>
	846	+ </div>
	847	+ <span>View more &RightArrow;</span>
	848	+ </a>
	849	+
	850	+ <!-- General elements -->
	851	+ <h4
	852	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	853	+ >
	854	+ Elements
	855	+ </h4>
	856	+ <div
	857	+ class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
	858	+ >
	859	+ <label class="block text-sm">
	860	+ <span class="text-gray-700 dark:text-gray-400">Name</span>
	861	+ <input
	862	+ class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
	863	+ placeholder="Jane Doe"
	864	+ />
	865	+ </label>
	866	+
	867	+ <div class="mt-4 text-sm">
	868	+ <span class="text-gray-700 dark:text-gray-400">
	869	+ Account Type
	870	+ </span>
	871	+ <div class="mt-2">
	872	+ <label
	873	+ class="inline-flex items-center text-gray-600 dark:text-gray-400"
	874	+ >
	875	+ <input
	876	+ type="radio"
	877	+ class="text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	878	+ name="accountType"
	879	+ value="personal"
	880	+ />
	881	+ <span class="ml-2">Personal</span>
	882	+ </label>
	883	+ <label
	884	+ class="inline-flex items-center ml-6 text-gray-600 dark:text-gray-400"
	885	+ >
	886	+ <input
	887	+ type="radio"
	888	+ class="text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	889	+ name="accountType"
	890	+ value="busines"
	891	+ />
	892	+ <span class="ml-2">Business</span>
	893	+ </label>
	894	+ </div>
	895	+ </div>
	896	+
	897	+ <label class="block mt-4 text-sm">
	898	+ <span class="text-gray-700 dark:text-gray-400">
	899	+ Requested Limit
	900	+ </span>
	901	+ <select
	902	+ class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	903	+ >
	904	+ <option>$1,000</option>
	905	+ <option>$5,000</option>
	906	+ <option>$10,000</option>
	907	+ <option>$25,000</option>
	908	+ </select>
	909	+ </label>
	910	+
	911	+ <label class="block mt-4 text-sm">
	912	+ <span class="text-gray-700 dark:text-gray-400">
	913	+ Multiselect
	914	+ </span>
	915	+ <select
	916	+ class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-multiselect focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	917	+ multiple
	918	+ >
	919	+ <option>Option 1</option>
	920	+ <option>Option 2</option>
	921	+ <option>Option 3</option>
	922	+ <option>Option 4</option>
	923	+ <option>Option 5</option>
	924	+ </select>
	925	+ </label>
	926	+
	927	+ <label class="block mt-4 text-sm">
	928	+ <span class="text-gray-700 dark:text-gray-400">Message</span>
	929	+ <textarea
	930	+ class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	931	+ rows="3"
	932	+ placeholder="Enter some long form content."
	933	+ ></textarea>
	934	+ </label>
	935	+
	936	+ <div class="flex mt-6 text-sm">
	937	+ <label class="flex items-center dark:text-gray-400">
	938	+ <input
	939	+ type="checkbox"
	940	+ class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	941	+ />
	942	+ <span class="ml-2">
	943	+ I agree to the
	944	+ <span class="underline">privacy policy</span>
	945	+ </span>
	946	+ </label>
	947	+ </div>
	948	+ </div>
	949	+
	950	+ <!-- Validation inputs -->
	951	+ <h4
	952	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	953	+ >
	954	+ Validation
	955	+ </h4>
	956	+ <div
	957	+ class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
	958	+ >
	959	+ <!-- Invalid input -->
	960	+ <label class="block text-sm">
	961	+ <span class="text-gray-700 dark:text-gray-400">
	962	+ Invalid input
	963	+ </span>
	964	+ <input
	965	+ class="block w-full mt-1 text-sm border-red-600 dark:text-gray-300 dark:bg-gray-700 focus:border-red-400 focus:outline-none focus:shadow-outline-red form-input"
	966	+ placeholder="Jane Doe"
	967	+ />
	968	+ <span class="text-xs text-red-600 dark:text-red-400">
	969	+ Your password is too short.
	970	+ </span>
	971	+ </label>
	972	+
	973	+ <!-- Valid input -->
	974	+ <label class="block mt-4 text-sm">
	975	+ <span class="text-gray-700 dark:text-gray-400">
	976	+ Valid input
	977	+ </span>
	978	+ <input
	979	+ class="block w-full mt-1 text-sm border-green-600 dark:text-gray-300 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green form-input"
	980	+ placeholder="Jane Doe"
	981	+ />
	982	+ <span class="text-xs text-green-600 dark:text-green-400">
	983	+ Your password is strong.
	984	+ </span>
	985	+ </label>
	986	+
	987	+ <!-- Helper text -->
	988	+ <label class="block mt-4 text-sm">
	989	+ <span class="text-gray-700 dark:text-gray-400">
	990	+ Helper text
	991	+ </span>
	992	+ <input
	993	+ class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
	994	+ placeholder="Jane Doe"
	995	+ />
	996	+ <span class="text-xs text-gray-600 dark:text-gray-400">
	997	+ Your password must be at least 6 characters long.
	998	+ </span>
	999	+ </label>
	1000	+ </div>
	1001	+
	1002	+ <!-- Inputs with icons -->
	1003	+ <h4
	1004	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	1005	+ >
	1006	+ Icons
	1007	+ </h4>
	1008	+ <div
	1009	+ class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
	1010	+ >
	1011	+ <label class="block text-sm">
	1012	+ <span class="text-gray-700 dark:text-gray-400">Icon left</span>
	1013	+ <!-- focus-within sets the color for the icon when input is focused -->
	1014	+ <div
	1015	+ class="relative text-gray-500 focus-within:text-purple-600 dark:focus-within:text-purple-400"
	1016	+ >
	1017	+ <input
	1018	+ class="block w-full pl-10 mt-1 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
	1019	+ placeholder="Jane Doe"
	1020	+ />
	1021	+ <div
	1022	+ class="absolute inset-y-0 flex items-center ml-3 pointer-events-none"
	1023	+ >
	1024	+ <svg
	1025	+ class="w-5 h-5"
	1026	+ aria-hidden="true"
	1027	+ fill="none"
	1028	+ stroke-linecap="round"
	1029	+ stroke-linejoin="round"
	1030	+ stroke-width="2"
	1031	+ viewBox="0 0 24 24"
	1032	+ stroke="currentColor"
	1033	+ >
	1034	+ <path
	1035	+ d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
	1036	+ ></path>
	1037	+ </svg>
	1038	+ </div>
	1039	+ </div>
	1040	+ </label>
	1041	+
	1042	+ <label class="block mt-4 text-sm">
	1043	+ <span class="text-gray-700 dark:text-gray-400">Icon right</span>
	1044	+ <!-- focus-within sets the color for the icon when input is focused -->
	1045	+ <div
	1046	+ class="relative text-gray-500 focus-within:text-purple-600 dark:focus-within:text-purple-400"
	1047	+ >
	1048	+ <input
	1049	+ class="block w-full pr-10 mt-1 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
	1050	+ placeholder="Jane Doe"
	1051	+ />
	1052	+ <div
	1053	+ class="absolute inset-y-0 right-0 flex items-center mr-3 pointer-events-none"
	1054	+ >
	1055	+ <svg
	1056	+ class="w-5 h-5"
	1057	+ aria-hidden="true"
	1058	+ fill="none"
	1059	+ stroke-linecap="round"
	1060	+ stroke-linejoin="round"
	1061	+ stroke-width="2"
	1062	+ viewBox="0 0 24 24"
	1063	+ stroke="currentColor"
	1064	+ >
	1065	+ <path
	1066	+ d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
	1067	+ ></path>
	1068	+ </svg>
	1069	+ </div>
	1070	+ </div>
	1071	+ </label>
	1072	+ </div>
	1073	+
	1074	+ <!-- Inputs with buttons -->
	1075	+ <h4
	1076	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	1077	+ >
	1078	+ Buttons
	1079	+ </h4>
	1080	+ <div
	1081	+ class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
	1082	+ >
	1083	+ <label class="block text-sm">
	1084	+ <span class="text-gray-700 dark:text-gray-400">
	1085	+ Button left
	1086	+ </span>
	1087	+ <div class="relative">
	1088	+ <input
	1089	+ class="block w-full pl-20 mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
	1090	+ placeholder="Jane Doe"
	1091	+ />
	1092	+ <button
	1093	+ class="absolute inset-y-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-l-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	1094	+ >
	1095	+ Click
	1096	+ </button>
	1097	+ </div>
	1098	+ </label>
	1099	+
	1100	+ <label class="block mt-4 text-sm">
	1101	+ <span class="text-gray-700 dark:text-gray-400">
	1102	+ Button right
	1103	+ </span>
	1104	+ <div
	1105	+ class="relative text-gray-500 focus-within:text-purple-600"
	1106	+ >
	1107	+ <input
	1108	+ class="block w-full pr-20 mt-1 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
	1109	+ placeholder="Jane Doe"
	1110	+ />
	1111	+ <button
	1112	+ class="absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-r-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	1113	+ >
	1114	+ Click
	1115	+ </button>
	1116	+ </div>
	1117	+ </label>
	1118	+ </div>
	1119	+ </div>
	1120	+ </main>
	1121	+ </div>
	1122	+ </div>
	1123	+ </body>
	1124	+</html>

html/public/index.html

Diff comments   View file @ 5f2a263

Changes suppressed. Click to show

...	...	@@ -0,0 +1,1525 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="./assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="./assets/js/init-alpine.js"></script>
	17	+ <link
	18	+ rel="stylesheet"
	19	+ href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
	20	+ />
	21	+ <script
	22	+ src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
	23	+ defer
	24	+ ></script>
	25	+ <script src="./assets/js/charts-lines.js" defer></script>
	26	+ <script src="./assets/js/charts-pie.js" defer></script>
	27	+ </head>
	28	+ <body>
	29	+ <div
	30	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	31	+ :class="{ 'overflow-hidden': isSideMenuOpen }"
	32	+ >
	33	+ <!-- Desktop sidebar -->
	34	+ <aside
	35	+ class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0"
	36	+ >
	37	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	38	+ <a
	39	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	40	+ href="#"
	41	+ >
	42	+ Windmill
	43	+ </a>
	44	+ <ul class="mt-6">
	45	+ <li class="relative px-6 py-3">
	46	+ <span
	47	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	48	+ aria-hidden="true"
	49	+ ></span>
	50	+ <a
	51	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	52	+ href="index.html"
	53	+ >
	54	+ <svg
	55	+ class="w-5 h-5"
	56	+ aria-hidden="true"
	57	+ fill="none"
	58	+ stroke-linecap="round"
	59	+ stroke-linejoin="round"
	60	+ stroke-width="2"
	61	+ viewBox="0 0 24 24"
	62	+ stroke="currentColor"
	63	+ >
	64	+ <path
	65	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	66	+ ></path>
	67	+ </svg>
	68	+ <span class="ml-4">Dashboard</span>
	69	+ </a>
	70	+ </li>
	71	+ </ul>
	72	+ <ul>
	73	+ <li class="relative px-6 py-3">
	74	+ <a
	75	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	76	+ href="forms.html"
	77	+ >
	78	+ <svg
	79	+ class="w-5 h-5"
	80	+ aria-hidden="true"
	81	+ fill="none"
	82	+ stroke-linecap="round"
	83	+ stroke-linejoin="round"
	84	+ stroke-width="2"
	85	+ viewBox="0 0 24 24"
	86	+ stroke="currentColor"
	87	+ >
	88	+ <path
	89	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	90	+ ></path>
	91	+ </svg>
	92	+ <span class="ml-4">Forms</span>
	93	+ </a>
	94	+ </li>
	95	+ <li class="relative px-6 py-3">
	96	+ <a
	97	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	98	+ href="cards.html"
	99	+ >
	100	+ <svg
	101	+ class="w-5 h-5"
	102	+ aria-hidden="true"
	103	+ fill="none"
	104	+ stroke-linecap="round"
	105	+ stroke-linejoin="round"
	106	+ stroke-width="2"
	107	+ viewBox="0 0 24 24"
	108	+ stroke="currentColor"
	109	+ >
	110	+ <path
	111	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	112	+ ></path>
	113	+ </svg>
	114	+ <span class="ml-4">Cards</span>
	115	+ </a>
	116	+ </li>
	117	+ <li class="relative px-6 py-3">
	118	+ <a
	119	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	120	+ href="charts.html"
	121	+ >
	122	+ <svg
	123	+ class="w-5 h-5"
	124	+ aria-hidden="true"
	125	+ fill="none"
	126	+ stroke-linecap="round"
	127	+ stroke-linejoin="round"
	128	+ stroke-width="2"
	129	+ viewBox="0 0 24 24"
	130	+ stroke="currentColor"
	131	+ >
	132	+ <path
	133	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	134	+ ></path>
	135	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	136	+ </svg>
	137	+ <span class="ml-4">Charts</span>
	138	+ </a>
	139	+ </li>
	140	+ <li class="relative px-6 py-3">
	141	+ <a
	142	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	143	+ href="buttons.html"
	144	+ >
	145	+ <svg
	146	+ class="w-5 h-5"
	147	+ aria-hidden="true"
	148	+ fill="none"
	149	+ stroke-linecap="round"
	150	+ stroke-linejoin="round"
	151	+ stroke-width="2"
	152	+ viewBox="0 0 24 24"
	153	+ stroke="currentColor"
	154	+ >
	155	+ <path
	156	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	157	+ ></path>
	158	+ </svg>
	159	+ <span class="ml-4">Buttons</span>
	160	+ </a>
	161	+ </li>
	162	+ <li class="relative px-6 py-3">
	163	+ <a
	164	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	165	+ href="modals.html"
	166	+ >
	167	+ <svg
	168	+ class="w-5 h-5"
	169	+ aria-hidden="true"
	170	+ fill="none"
	171	+ stroke-linecap="round"
	172	+ stroke-linejoin="round"
	173	+ stroke-width="2"
	174	+ viewBox="0 0 24 24"
	175	+ stroke="currentColor"
	176	+ >
	177	+ <path
	178	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	179	+ ></path>
	180	+ </svg>
	181	+ <span class="ml-4">Modals</span>
	182	+ </a>
	183	+ </li>
	184	+ <li class="relative px-6 py-3">
	185	+ <a
	186	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	187	+ href="tables.html"
	188	+ >
	189	+ <svg
	190	+ class="w-5 h-5"
	191	+ aria-hidden="true"
	192	+ fill="none"
	193	+ stroke-linecap="round"
	194	+ stroke-linejoin="round"
	195	+ stroke-width="2"
	196	+ viewBox="0 0 24 24"
	197	+ stroke="currentColor"
	198	+ >
	199	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	200	+ </svg>
	201	+ <span class="ml-4">Tables</span>
	202	+ </a>
	203	+ </li>
	204	+ <li class="relative px-6 py-3">
	205	+ <button
	206	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	207	+ @click="togglePagesMenu"
	208	+ aria-haspopup="true"
	209	+ >
	210	+ <span class="inline-flex items-center">
	211	+ <svg
	212	+ class="w-5 h-5"
	213	+ aria-hidden="true"
	214	+ fill="none"
	215	+ stroke-linecap="round"
	216	+ stroke-linejoin="round"
	217	+ stroke-width="2"
	218	+ viewBox="0 0 24 24"
	219	+ stroke="currentColor"
	220	+ >
	221	+ <path
	222	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	223	+ ></path>
	224	+ </svg>
	225	+ <span class="ml-4">Pages</span>
	226	+ </span>
	227	+ <svg
	228	+ class="w-4 h-4"
	229	+ aria-hidden="true"
	230	+ fill="currentColor"
	231	+ viewBox="0 0 20 20"
	232	+ >
	233	+ <path
	234	+ fill-rule="evenodd"
	235	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	236	+ clip-rule="evenodd"
	237	+ ></path>
	238	+ </svg>
	239	+ </button>
	240	+ <template x-if="isPagesMenuOpen">
	241	+ <ul
	242	+ x-transition:enter="transition-all ease-in-out duration-300"
	243	+ x-transition:enter-start="opacity-25 max-h-0"
	244	+ x-transition:enter-end="opacity-100 max-h-xl"
	245	+ x-transition:leave="transition-all ease-in-out duration-300"
	246	+ x-transition:leave-start="opacity-100 max-h-xl"
	247	+ x-transition:leave-end="opacity-0 max-h-0"
	248	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	249	+ aria-label="submenu"
	250	+ >
	251	+ <li
	252	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	253	+ >
	254	+ <a class="w-full" href="pages/login.html">Login</a>
	255	+ </li>
	256	+ <li
	257	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	258	+ >
	259	+ <a class="w-full" href="pages/create-account.html">
	260	+ Create account
	261	+ </a>
	262	+ </li>
	263	+ <li
	264	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	265	+ >
	266	+ <a class="w-full" href="pages/forgot-password.html">
	267	+ Forgot password
	268	+ </a>
	269	+ </li>
	270	+ <li
	271	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	272	+ >
	273	+ <a class="w-full" href="pages/404.html">404</a>
	274	+ </li>
	275	+ <li
	276	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	277	+ >
	278	+ <a class="w-full" href="pages/blank.html">Blank</a>
	279	+ </li>
	280	+ </ul>
	281	+ </template>
	282	+ </li>
	283	+ </ul>
	284	+ <div class="px-6 my-6">
	285	+ <button
	286	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	287	+ >
	288	+ Create account
	289	+ <span class="ml-2" aria-hidden="true">+</span>
	290	+ </button>
	291	+ </div>
	292	+ </div>
	293	+ </aside>
	294	+ <!-- Mobile sidebar -->
	295	+ <!-- Backdrop -->
	296	+ <div
	297	+ x-show="isSideMenuOpen"
	298	+ x-transition:enter="transition ease-in-out duration-150"
	299	+ x-transition:enter-start="opacity-0"
	300	+ x-transition:enter-end="opacity-100"
	301	+ x-transition:leave="transition ease-in-out duration-150"
	302	+ x-transition:leave-start="opacity-100"
	303	+ x-transition:leave-end="opacity-0"
	304	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	305	+ ></div>
	306	+ <aside
	307	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	308	+ x-show="isSideMenuOpen"
	309	+ x-transition:enter="transition ease-in-out duration-150"
	310	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	311	+ x-transition:enter-end="opacity-100"
	312	+ x-transition:leave="transition ease-in-out duration-150"
	313	+ x-transition:leave-start="opacity-100"
	314	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	315	+ @click.away="closeSideMenu"
	316	+ @keydown.escape="closeSideMenu"
	317	+ >
	318	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	319	+ <a
	320	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	321	+ href="#"
	322	+ >
	323	+ Windmill
	324	+ </a>
	325	+ <ul class="mt-6">
	326	+ <li class="relative px-6 py-3">
	327	+ <span
	328	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	329	+ aria-hidden="true"
	330	+ ></span>
	331	+ <a
	332	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	333	+ href="index.html"
	334	+ >
	335	+ <svg
	336	+ class="w-5 h-5"
	337	+ aria-hidden="true"
	338	+ fill="none"
	339	+ stroke-linecap="round"
	340	+ stroke-linejoin="round"
	341	+ stroke-width="2"
	342	+ viewBox="0 0 24 24"
	343	+ stroke="currentColor"
	344	+ >
	345	+ <path
	346	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	347	+ ></path>
	348	+ </svg>
	349	+ <span class="ml-4">Dashboard</span>
	350	+ </a>
	351	+ </li>
	352	+ </ul>
	353	+ <ul>
	354	+ <li class="relative px-6 py-3">
	355	+ <a
	356	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	357	+ href="forms.html"
	358	+ >
	359	+ <svg
	360	+ class="w-5 h-5"
	361	+ aria-hidden="true"
	362	+ fill="none"
	363	+ stroke-linecap="round"
	364	+ stroke-linejoin="round"
	365	+ stroke-width="2"
	366	+ viewBox="0 0 24 24"
	367	+ stroke="currentColor"
	368	+ >
	369	+ <path
	370	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	371	+ ></path>
	372	+ </svg>
	373	+ <span class="ml-4">Forms</span>
	374	+ </a>
	375	+ </li>
	376	+ <li class="relative px-6 py-3">
	377	+ <a
	378	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	379	+ href="cards.html"
	380	+ >
	381	+ <svg
	382	+ class="w-5 h-5"
	383	+ aria-hidden="true"
	384	+ fill="none"
	385	+ stroke-linecap="round"
	386	+ stroke-linejoin="round"
	387	+ stroke-width="2"
	388	+ viewBox="0 0 24 24"
	389	+ stroke="currentColor"
	390	+ >
	391	+ <path
	392	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	393	+ ></path>
	394	+ </svg>
	395	+ <span class="ml-4">Cards</span>
	396	+ </a>
	397	+ </li>
	398	+ <li class="relative px-6 py-3">
	399	+ <a
	400	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	401	+ href="charts.html"
	402	+ >
	403	+ <svg
	404	+ class="w-5 h-5"
	405	+ aria-hidden="true"
	406	+ fill="none"
	407	+ stroke-linecap="round"
	408	+ stroke-linejoin="round"
	409	+ stroke-width="2"
	410	+ viewBox="0 0 24 24"
	411	+ stroke="currentColor"
	412	+ >
	413	+ <path
	414	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	415	+ ></path>
	416	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	417	+ </svg>
	418	+ <span class="ml-4">Charts</span>
	419	+ </a>
	420	+ </li>
	421	+ <li class="relative px-6 py-3">
	422	+ <a
	423	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	424	+ href="buttons.html"
	425	+ >
	426	+ <svg
	427	+ class="w-5 h-5"
	428	+ aria-hidden="true"
	429	+ fill="none"
	430	+ stroke-linecap="round"
	431	+ stroke-linejoin="round"
	432	+ stroke-width="2"
	433	+ viewBox="0 0 24 24"
	434	+ stroke="currentColor"
	435	+ >
	436	+ <path
	437	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	438	+ ></path>
	439	+ </svg>
	440	+ <span class="ml-4">Buttons</span>
	441	+ </a>
	442	+ </li>
	443	+ <li class="relative px-6 py-3">
	444	+ <a
	445	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	446	+ href="modals.html"
	447	+ >
	448	+ <svg
	449	+ class="w-5 h-5"
	450	+ aria-hidden="true"
	451	+ fill="none"
	452	+ stroke-linecap="round"
	453	+ stroke-linejoin="round"
	454	+ stroke-width="2"
	455	+ viewBox="0 0 24 24"
	456	+ stroke="currentColor"
	457	+ >
	458	+ <path
	459	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	460	+ ></path>
	461	+ </svg>
	462	+ <span class="ml-4">Modals</span>
	463	+ </a>
	464	+ </li>
	465	+ <li class="relative px-6 py-3">
	466	+ <a
	467	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	468	+ href="tables.html"
	469	+ >
	470	+ <svg
	471	+ class="w-5 h-5"
	472	+ aria-hidden="true"
	473	+ fill="none"
	474	+ stroke-linecap="round"
	475	+ stroke-linejoin="round"
	476	+ stroke-width="2"
	477	+ viewBox="0 0 24 24"
	478	+ stroke="currentColor"
	479	+ >
	480	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	481	+ </svg>
	482	+ <span class="ml-4">Tables</span>
	483	+ </a>
	484	+ </li>
	485	+ <li class="relative px-6 py-3">
	486	+ <button
	487	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	488	+ @click="togglePagesMenu"
	489	+ aria-haspopup="true"
	490	+ >
	491	+ <span class="inline-flex items-center">
	492	+ <svg
	493	+ class="w-5 h-5"
	494	+ aria-hidden="true"
	495	+ fill="none"
	496	+ stroke-linecap="round"
	497	+ stroke-linejoin="round"
	498	+ stroke-width="2"
	499	+ viewBox="0 0 24 24"
	500	+ stroke="currentColor"
	501	+ >
	502	+ <path
	503	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	504	+ ></path>
	505	+ </svg>
	506	+ <span class="ml-4">Pages</span>
	507	+ </span>
	508	+ <svg
	509	+ class="w-4 h-4"
	510	+ aria-hidden="true"
	511	+ fill="currentColor"
	512	+ viewBox="0 0 20 20"
	513	+ >
	514	+ <path
	515	+ fill-rule="evenodd"
	516	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	517	+ clip-rule="evenodd"
	518	+ ></path>
	519	+ </svg>
	520	+ </button>
	521	+ <template x-if="isPagesMenuOpen">
	522	+ <ul
	523	+ x-transition:enter="transition-all ease-in-out duration-300"
	524	+ x-transition:enter-start="opacity-25 max-h-0"
	525	+ x-transition:enter-end="opacity-100 max-h-xl"
	526	+ x-transition:leave="transition-all ease-in-out duration-300"
	527	+ x-transition:leave-start="opacity-100 max-h-xl"
	528	+ x-transition:leave-end="opacity-0 max-h-0"
	529	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	530	+ aria-label="submenu"
	531	+ >
	532	+ <li
	533	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	534	+ >
	535	+ <a class="w-full" href="pages/login.html">Login</a>
	536	+ </li>
	537	+ <li
	538	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	539	+ >
	540	+ <a class="w-full" href="pages/create-account.html">
	541	+ Create account
	542	+ </a>
	543	+ </li>
	544	+ <li
	545	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	546	+ >
	547	+ <a class="w-full" href="pages/forgot-password.html">
	548	+ Forgot password
	549	+ </a>
	550	+ </li>
	551	+ <li
	552	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	553	+ >
	554	+ <a class="w-full" href="pages/404.html">404</a>
	555	+ </li>
	556	+ <li
	557	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	558	+ >
	559	+ <a class="w-full" href="pages/blank.html">Blank</a>
	560	+ </li>
	561	+ </ul>
	562	+ </template>
	563	+ </li>
	564	+ </ul>
	565	+ <div class="px-6 my-6">
	566	+ <button
	567	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	568	+ >
	569	+ Create account
	570	+ <span class="ml-2" aria-hidden="true">+</span>
	571	+ </button>
	572	+ </div>
	573	+ </div>
	574	+ </aside>
	575	+ <div class="flex flex-col flex-1 w-full">
	576	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	577	+ <div
	578	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	579	+ >
	580	+ <!-- Mobile hamburger -->
	581	+ <button
	582	+ class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	583	+ @click="toggleSideMenu"
	584	+ aria-label="Menu"
	585	+ >
	586	+ <svg
	587	+ class="w-6 h-6"
	588	+ aria-hidden="true"
	589	+ fill="currentColor"
	590	+ viewBox="0 0 20 20"
	591	+ >
	592	+ <path
	593	+ fill-rule="evenodd"
	594	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	595	+ clip-rule="evenodd"
	596	+ ></path>
	597	+ </svg>
	598	+ </button>
	599	+ <!-- Search input -->
	600	+ <div class="flex justify-center flex-1 lg:mr-32">
	601	+ <div
	602	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	603	+ >
	604	+ <div class="absolute inset-y-0 flex items-center pl-2">
	605	+ <svg
	606	+ class="w-4 h-4"
	607	+ aria-hidden="true"
	608	+ fill="currentColor"
	609	+ viewBox="0 0 20 20"
	610	+ >
	611	+ <path
	612	+ fill-rule="evenodd"
	613	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	614	+ clip-rule="evenodd"
	615	+ ></path>
	616	+ </svg>
	617	+ </div>
	618	+ <input
	619	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	620	+ type="text"
	621	+ placeholder="Search for projects"
	622	+ aria-label="Search"
	623	+ />
	624	+ </div>
	625	+ </div>
	626	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	627	+ <!-- Theme toggler -->
	628	+ <li class="flex">
	629	+ <button
	630	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	631	+ @click="toggleTheme"
	632	+ aria-label="Toggle color mode"
	633	+ >
	634	+ <template x-if="!dark">
	635	+ <svg
	636	+ class="w-5 h-5"
	637	+ aria-hidden="true"
	638	+ fill="currentColor"
	639	+ viewBox="0 0 20 20"
	640	+ >
	641	+ <path
	642	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	643	+ ></path>
	644	+ </svg>
	645	+ </template>
	646	+ <template x-if="dark">
	647	+ <svg
	648	+ class="w-5 h-5"
	649	+ aria-hidden="true"
	650	+ fill="currentColor"
	651	+ viewBox="0 0 20 20"
	652	+ >
	653	+ <path
	654	+ fill-rule="evenodd"
	655	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	656	+ clip-rule="evenodd"
	657	+ ></path>
	658	+ </svg>
	659	+ </template>
	660	+ </button>
	661	+ </li>
	662	+ <!-- Notifications menu -->
	663	+ <li class="relative">
	664	+ <button
	665	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	666	+ @click="toggleNotificationsMenu"
	667	+ @keydown.escape="closeNotificationsMenu"
	668	+ aria-label="Notifications"
	669	+ aria-haspopup="true"
	670	+ >
	671	+ <svg
	672	+ class="w-5 h-5"
	673	+ aria-hidden="true"
	674	+ fill="currentColor"
	675	+ viewBox="0 0 20 20"
	676	+ >
	677	+ <path
	678	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	679	+ ></path>
	680	+ </svg>
	681	+ <!-- Notification badge -->
	682	+ <span
	683	+ aria-hidden="true"
	684	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	685	+ ></span>
	686	+ </button>
	687	+ <template x-if="isNotificationsMenuOpen">
	688	+ <ul
	689	+ x-transition:leave="transition ease-in duration-150"
	690	+ x-transition:leave-start="opacity-100"
	691	+ x-transition:leave-end="opacity-0"
	692	+ @click.away="closeNotificationsMenu"
	693	+ @keydown.escape="closeNotificationsMenu"
	694	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	695	+ >
	696	+ <li class="flex">
	697	+ <a
	698	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	699	+ href="#"
	700	+ >
	701	+ <span>Messages</span>
	702	+ <span
	703	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	704	+ >
	705	+ 13
	706	+ </span>
	707	+ </a>
	708	+ </li>
	709	+ <li class="flex">
	710	+ <a
	711	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	712	+ href="#"
	713	+ >
	714	+ <span>Sales</span>
	715	+ <span
	716	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	717	+ >
	718	+ 2
	719	+ </span>
	720	+ </a>
	721	+ </li>
	722	+ <li class="flex">
	723	+ <a
	724	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	725	+ href="#"
	726	+ >
	727	+ <span>Alerts</span>
	728	+ </a>
	729	+ </li>
	730	+ </ul>
	731	+ </template>
	732	+ </li>
	733	+ <!-- Profile menu -->
	734	+ <li class="relative">
	735	+ <button
	736	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	737	+ @click="toggleProfileMenu"
	738	+ @keydown.escape="closeProfileMenu"
	739	+ aria-label="Account"
	740	+ aria-haspopup="true"
	741	+ >
	742	+ <img
	743	+ class="object-cover w-8 h-8 rounded-full"
	744	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	745	+ alt=""
	746	+ aria-hidden="true"
	747	+ />
	748	+ </button>
	749	+ <template x-if="isProfileMenuOpen">
	750	+ <ul
	751	+ x-transition:leave="transition ease-in duration-150"
	752	+ x-transition:leave-start="opacity-100"
	753	+ x-transition:leave-end="opacity-0"
	754	+ @click.away="closeProfileMenu"
	755	+ @keydown.escape="closeProfileMenu"
	756	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	757	+ aria-label="submenu"
	758	+ >
	759	+ <li class="flex">
	760	+ <a
	761	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	762	+ href="#"
	763	+ >
	764	+ <svg
	765	+ class="w-4 h-4 mr-3"
	766	+ aria-hidden="true"
	767	+ fill="none"
	768	+ stroke-linecap="round"
	769	+ stroke-linejoin="round"
	770	+ stroke-width="2"
	771	+ viewBox="0 0 24 24"
	772	+ stroke="currentColor"
	773	+ >
	774	+ <path
	775	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	776	+ ></path>
	777	+ </svg>
	778	+ <span>Profile</span>
	779	+ </a>
	780	+ </li>
	781	+ <li class="flex">
	782	+ <a
	783	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	784	+ href="#"
	785	+ >
	786	+ <svg
	787	+ class="w-4 h-4 mr-3"
	788	+ aria-hidden="true"
	789	+ fill="none"
	790	+ stroke-linecap="round"
	791	+ stroke-linejoin="round"
	792	+ stroke-width="2"
	793	+ viewBox="0 0 24 24"
	794	+ stroke="currentColor"
	795	+ >
	796	+ <path
	797	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	798	+ ></path>
	799	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	800	+ </svg>
	801	+ <span>Settings</span>
	802	+ </a>
	803	+ </li>
	804	+ <li class="flex">
	805	+ <a
	806	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	807	+ href="#"
	808	+ >
	809	+ <svg
	810	+ class="w-4 h-4 mr-3"
	811	+ aria-hidden="true"
	812	+ fill="none"
	813	+ stroke-linecap="round"
	814	+ stroke-linejoin="round"
	815	+ stroke-width="2"
	816	+ viewBox="0 0 24 24"
	817	+ stroke="currentColor"
	818	+ >
	819	+ <path
	820	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	821	+ ></path>
	822	+ </svg>
	823	+ <span>Log out</span>
	824	+ </a>
	825	+ </li>
	826	+ </ul>
	827	+ </template>
	828	+ </li>
	829	+ </ul>
	830	+ </div>
	831	+ </header>
	832	+ <main class="h-full overflow-y-auto">
	833	+ <div class="container px-6 mx-auto grid">
	834	+ <h2
	835	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	836	+ >
	837	+ Dashboard
	838	+ </h2>
	839	+ <!-- CTA -->
	840	+ <a
	841	+ class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
	842	+ href="https://github.com/estevanmaito/windmill-dashboard"
	843	+ >
	844	+ <div class="flex items-center">
	845	+ <svg
	846	+ class="w-5 h-5 mr-2"
	847	+ fill="currentColor"
	848	+ viewBox="0 0 20 20"
	849	+ >
	850	+ <path
	851	+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
	852	+ ></path>
	853	+ </svg>
	854	+ <span>Star this project on GitHub</span>
	855	+ </div>
	856	+ <span>View more &RightArrow;</span>
	857	+ </a>
	858	+ <!-- Cards -->
	859	+ <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
	860	+ <!-- Card -->
	861	+ <div
	862	+ class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	863	+ >
	864	+ <div
	865	+ class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500"
	866	+ >
	867	+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
	868	+ <path
	869	+ d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
	870	+ ></path>
	871	+ </svg>
	872	+ </div>
	873	+ <div>
	874	+ <p
	875	+ class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
	876	+ >
	877	+ Total clients
	878	+ </p>
	879	+ <p
	880	+ class="text-lg font-semibold text-gray-700 dark:text-gray-200"
	881	+ >
	882	+ 6389
	883	+ </p>
	884	+ </div>
	885	+ </div>
	886	+ <!-- Card -->
	887	+ <div
	888	+ class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	889	+ >
	890	+ <div
	891	+ class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500"
	892	+ >
	893	+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
	894	+ <path
	895	+ fill-rule="evenodd"
	896	+ d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
	897	+ clip-rule="evenodd"
	898	+ ></path>
	899	+ </svg>
	900	+ </div>
	901	+ <div>
	902	+ <p
	903	+ class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
	904	+ >
	905	+ Account balance
	906	+ </p>
	907	+ <p
	908	+ class="text-lg font-semibold text-gray-700 dark:text-gray-200"
	909	+ >
	910	+ $ 46,760.89
	911	+ </p>
	912	+ </div>
	913	+ </div>
	914	+ <!-- Card -->
	915	+ <div
	916	+ class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	917	+ >
	918	+ <div
	919	+ class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500"
	920	+ >
	921	+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
	922	+ <path
	923	+ d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
	924	+ ></path>
	925	+ </svg>
	926	+ </div>
	927	+ <div>
	928	+ <p
	929	+ class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
	930	+ >
	931	+ New sales
	932	+ </p>
	933	+ <p
	934	+ class="text-lg font-semibold text-gray-700 dark:text-gray-200"
	935	+ >
	936	+ 376
	937	+ </p>
	938	+ </div>
	939	+ </div>
	940	+ <!-- Card -->
	941	+ <div
	942	+ class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	943	+ >
	944	+ <div
	945	+ class="p-3 mr-4 text-teal-500 bg-teal-100 rounded-full dark:text-teal-100 dark:bg-teal-500"
	946	+ >
	947	+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
	948	+ <path
	949	+ fill-rule="evenodd"
	950	+ d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
	951	+ clip-rule="evenodd"
	952	+ ></path>
	953	+ </svg>
	954	+ </div>
	955	+ <div>
	956	+ <p
	957	+ class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
	958	+ >
	959	+ Pending contacts
	960	+ </p>
	961	+ <p
	962	+ class="text-lg font-semibold text-gray-700 dark:text-gray-200"
	963	+ >
	964	+ 35
	965	+ </p>
	966	+ </div>
	967	+ </div>
	968	+ </div>
	969	+
	970	+ <!-- New Table -->
	971	+ <div class="w-full overflow-hidden rounded-lg shadow-xs">
	972	+ <div class="w-full overflow-x-auto">
	973	+ <table class="w-full whitespace-no-wrap">
	974	+ <thead>
	975	+ <tr
	976	+ class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
	977	+ >
	978	+ <th class="px-4 py-3">Client</th>
	979	+ <th class="px-4 py-3">Amount</th>
	980	+ <th class="px-4 py-3">Status</th>
	981	+ <th class="px-4 py-3">Date</th>
	982	+ </tr>
	983	+ </thead>
	984	+ <tbody
	985	+ class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
	986	+ >
	987	+ <tr class="text-gray-700 dark:text-gray-400">
	988	+ <td class="px-4 py-3">
	989	+ <div class="flex items-center text-sm">
	990	+ <!-- Avatar with inset shadow -->
	991	+ <div
	992	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	993	+ >
	994	+ <img
	995	+ class="object-cover w-full h-full rounded-full"
	996	+ src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	997	+ alt=""
	998	+ loading="lazy"
	999	+ />
	1000	+ <div
	1001	+ class="absolute inset-0 rounded-full shadow-inner"
	1002	+ aria-hidden="true"
	1003	+ ></div>
	1004	+ </div>
	1005	+ <div>
	1006	+ <p class="font-semibold">Hans Burger</p>
	1007	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1008	+ 10x Developer
	1009	+ </p>
	1010	+ </div>
	1011	+ </div>
	1012	+ </td>
	1013	+ <td class="px-4 py-3 text-sm">
	1014	+ $ 863.45
	1015	+ </td>
	1016	+ <td class="px-4 py-3 text-xs">
	1017	+ <span
	1018	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1019	+ >
	1020	+ Approved
	1021	+ </span>
	1022	+ </td>
	1023	+ <td class="px-4 py-3 text-sm">
	1024	+ 6/10/2020
	1025	+ </td>
	1026	+ </tr>
	1027	+
	1028	+ <tr class="text-gray-700 dark:text-gray-400">
	1029	+ <td class="px-4 py-3">
	1030	+ <div class="flex items-center text-sm">
	1031	+ <!-- Avatar with inset shadow -->
	1032	+ <div
	1033	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1034	+ >
	1035	+ <img
	1036	+ class="object-cover w-full h-full rounded-full"
	1037	+ src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&facepad=3&fit=facearea&s=707b9c33066bf8808c934c8ab394dff6"
	1038	+ alt=""
	1039	+ loading="lazy"
	1040	+ />
	1041	+ <div
	1042	+ class="absolute inset-0 rounded-full shadow-inner"
	1043	+ aria-hidden="true"
	1044	+ ></div>
	1045	+ </div>
	1046	+ <div>
	1047	+ <p class="font-semibold">Jolina Angelie</p>
	1048	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1049	+ Unemployed
	1050	+ </p>
	1051	+ </div>
	1052	+ </div>
	1053	+ </td>
	1054	+ <td class="px-4 py-3 text-sm">
	1055	+ $ 369.95
	1056	+ </td>
	1057	+ <td class="px-4 py-3 text-xs">
	1058	+ <span
	1059	+ class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"
	1060	+ >
	1061	+ Pending
	1062	+ </span>
	1063	+ </td>
	1064	+ <td class="px-4 py-3 text-sm">
	1065	+ 6/10/2020
	1066	+ </td>
	1067	+ </tr>
	1068	+
	1069	+ <tr class="text-gray-700 dark:text-gray-400">
	1070	+ <td class="px-4 py-3">
	1071	+ <div class="flex items-center text-sm">
	1072	+ <!-- Avatar with inset shadow -->
	1073	+ <div
	1074	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1075	+ >
	1076	+ <img
	1077	+ class="object-cover w-full h-full rounded-full"
	1078	+ src="https://images.unsplash.com/photo-1551069613-1904dbdcda11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1079	+ alt=""
	1080	+ loading="lazy"
	1081	+ />
	1082	+ <div
	1083	+ class="absolute inset-0 rounded-full shadow-inner"
	1084	+ aria-hidden="true"
	1085	+ ></div>
	1086	+ </div>
	1087	+ <div>
	1088	+ <p class="font-semibold">Sarah Curry</p>
	1089	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1090	+ Designer
	1091	+ </p>
	1092	+ </div>
	1093	+ </div>
	1094	+ </td>
	1095	+ <td class="px-4 py-3 text-sm">
	1096	+ $ 86.00
	1097	+ </td>
	1098	+ <td class="px-4 py-3 text-xs">
	1099	+ <span
	1100	+ class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-700"
	1101	+ >
	1102	+ Denied
	1103	+ </span>
	1104	+ </td>
	1105	+ <td class="px-4 py-3 text-sm">
	1106	+ 6/10/2020
	1107	+ </td>
	1108	+ </tr>
	1109	+
	1110	+ <tr class="text-gray-700 dark:text-gray-400">
	1111	+ <td class="px-4 py-3">
	1112	+ <div class="flex items-center text-sm">
	1113	+ <!-- Avatar with inset shadow -->
	1114	+ <div
	1115	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1116	+ >
	1117	+ <img
	1118	+ class="object-cover w-full h-full rounded-full"
	1119	+ src="https://images.unsplash.com/photo-1551006917-3b4c078c47c9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1120	+ alt=""
	1121	+ loading="lazy"
	1122	+ />
	1123	+ <div
	1124	+ class="absolute inset-0 rounded-full shadow-inner"
	1125	+ aria-hidden="true"
	1126	+ ></div>
	1127	+ </div>
	1128	+ <div>
	1129	+ <p class="font-semibold">Rulia Joberts</p>
	1130	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1131	+ Actress
	1132	+ </p>
	1133	+ </div>
	1134	+ </div>
	1135	+ </td>
	1136	+ <td class="px-4 py-3 text-sm">
	1137	+ $ 1276.45
	1138	+ </td>
	1139	+ <td class="px-4 py-3 text-xs">
	1140	+ <span
	1141	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1142	+ >
	1143	+ Approved
	1144	+ </span>
	1145	+ </td>
	1146	+ <td class="px-4 py-3 text-sm">
	1147	+ 6/10/2020
	1148	+ </td>
	1149	+ </tr>
	1150	+
	1151	+ <tr class="text-gray-700 dark:text-gray-400">
	1152	+ <td class="px-4 py-3">
	1153	+ <div class="flex items-center text-sm">
	1154	+ <!-- Avatar with inset shadow -->
	1155	+ <div
	1156	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1157	+ >
	1158	+ <img
	1159	+ class="object-cover w-full h-full rounded-full"
	1160	+ src="https://images.unsplash.com/photo-1546456073-6712f79251bb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1161	+ alt=""
	1162	+ loading="lazy"
	1163	+ />
	1164	+ <div
	1165	+ class="absolute inset-0 rounded-full shadow-inner"
	1166	+ aria-hidden="true"
	1167	+ ></div>
	1168	+ </div>
	1169	+ <div>
	1170	+ <p class="font-semibold">Wenzel Dashington</p>
	1171	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1172	+ Actor
	1173	+ </p>
	1174	+ </div>
	1175	+ </div>
	1176	+ </td>
	1177	+ <td class="px-4 py-3 text-sm">
	1178	+ $ 863.45
	1179	+ </td>
	1180	+ <td class="px-4 py-3 text-xs">
	1181	+ <span
	1182	+ class="px-2 py-1 font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full dark:text-gray-100 dark:bg-gray-700"
	1183	+ >
	1184	+ Expired
	1185	+ </span>
	1186	+ </td>
	1187	+ <td class="px-4 py-3 text-sm">
	1188	+ 6/10/2020
	1189	+ </td>
	1190	+ </tr>
	1191	+
	1192	+ <tr class="text-gray-700 dark:text-gray-400">
	1193	+ <td class="px-4 py-3">
	1194	+ <div class="flex items-center text-sm">
	1195	+ <!-- Avatar with inset shadow -->
	1196	+ <div
	1197	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1198	+ >
	1199	+ <img
	1200	+ class="object-cover w-full h-full rounded-full"
	1201	+ src="https://images.unsplash.com/photo-1502720705749-871143f0e671?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=b8377ca9f985d80264279f277f3a67f5"
	1202	+ alt=""
	1203	+ loading="lazy"
	1204	+ />
	1205	+ <div
	1206	+ class="absolute inset-0 rounded-full shadow-inner"
	1207	+ aria-hidden="true"
	1208	+ ></div>
	1209	+ </div>
	1210	+ <div>
	1211	+ <p class="font-semibold">Dave Li</p>
	1212	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1213	+ Influencer
	1214	+ </p>
	1215	+ </div>
	1216	+ </div>
	1217	+ </td>
	1218	+ <td class="px-4 py-3 text-sm">
	1219	+ $ 863.45
	1220	+ </td>
	1221	+ <td class="px-4 py-3 text-xs">
	1222	+ <span
	1223	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1224	+ >
	1225	+ Approved
	1226	+ </span>
	1227	+ </td>
	1228	+ <td class="px-4 py-3 text-sm">
	1229	+ 6/10/2020
	1230	+ </td>
	1231	+ </tr>
	1232	+
	1233	+ <tr class="text-gray-700 dark:text-gray-400">
	1234	+ <td class="px-4 py-3">
	1235	+ <div class="flex items-center text-sm">
	1236	+ <!-- Avatar with inset shadow -->
	1237	+ <div
	1238	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1239	+ >
	1240	+ <img
	1241	+ class="object-cover w-full h-full rounded-full"
	1242	+ src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1243	+ alt=""
	1244	+ loading="lazy"
	1245	+ />
	1246	+ <div
	1247	+ class="absolute inset-0 rounded-full shadow-inner"
	1248	+ aria-hidden="true"
	1249	+ ></div>
	1250	+ </div>
	1251	+ <div>
	1252	+ <p class="font-semibold">Maria Ramovic</p>
	1253	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1254	+ Runner
	1255	+ </p>
	1256	+ </div>
	1257	+ </div>
	1258	+ </td>
	1259	+ <td class="px-4 py-3 text-sm">
	1260	+ $ 863.45
	1261	+ </td>
	1262	+ <td class="px-4 py-3 text-xs">
	1263	+ <span
	1264	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1265	+ >
	1266	+ Approved
	1267	+ </span>
	1268	+ </td>
	1269	+ <td class="px-4 py-3 text-sm">
	1270	+ 6/10/2020
	1271	+ </td>
	1272	+ </tr>
	1273	+
	1274	+ <tr class="text-gray-700 dark:text-gray-400">
	1275	+ <td class="px-4 py-3">
	1276	+ <div class="flex items-center text-sm">
	1277	+ <!-- Avatar with inset shadow -->
	1278	+ <div
	1279	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1280	+ >
	1281	+ <img
	1282	+ class="object-cover w-full h-full rounded-full"
	1283	+ src="https://images.unsplash.com/photo-1566411520896-01e7ca4726af?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1284	+ alt=""
	1285	+ loading="lazy"
	1286	+ />
	1287	+ <div
	1288	+ class="absolute inset-0 rounded-full shadow-inner"
	1289	+ aria-hidden="true"
	1290	+ ></div>
	1291	+ </div>
	1292	+ <div>
	1293	+ <p class="font-semibold">Hitney Wouston</p>
	1294	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1295	+ Singer
	1296	+ </p>
	1297	+ </div>
	1298	+ </div>
	1299	+ </td>
	1300	+ <td class="px-4 py-3 text-sm">
	1301	+ $ 863.45
	1302	+ </td>
	1303	+ <td class="px-4 py-3 text-xs">
	1304	+ <span
	1305	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1306	+ >
	1307	+ Approved
	1308	+ </span>
	1309	+ </td>
	1310	+ <td class="px-4 py-3 text-sm">
	1311	+ 6/10/2020
	1312	+ </td>
	1313	+ </tr>
	1314	+
	1315	+ <tr class="text-gray-700 dark:text-gray-400">
	1316	+ <td class="px-4 py-3">
	1317	+ <div class="flex items-center text-sm">
	1318	+ <!-- Avatar with inset shadow -->
	1319	+ <div
	1320	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1321	+ >
	1322	+ <img
	1323	+ class="object-cover w-full h-full rounded-full"
	1324	+ src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1325	+ alt=""
	1326	+ loading="lazy"
	1327	+ />
	1328	+ <div
	1329	+ class="absolute inset-0 rounded-full shadow-inner"
	1330	+ aria-hidden="true"
	1331	+ ></div>
	1332	+ </div>
	1333	+ <div>
	1334	+ <p class="font-semibold">Hans Burger</p>
	1335	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1336	+ 10x Developer
	1337	+ </p>
	1338	+ </div>
	1339	+ </div>
	1340	+ </td>
	1341	+ <td class="px-4 py-3 text-sm">
	1342	+ $ 863.45
	1343	+ </td>
	1344	+ <td class="px-4 py-3 text-xs">
	1345	+ <span
	1346	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1347	+ >
	1348	+ Approved
	1349	+ </span>
	1350	+ </td>
	1351	+ <td class="px-4 py-3 text-sm">
	1352	+ 6/10/2020
	1353	+ </td>
	1354	+ </tr>
	1355	+ </tbody>
	1356	+ </table>
	1357	+ </div>
	1358	+ <div
	1359	+ class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800"
	1360	+ >
	1361	+ <span class="flex items-center col-span-3">
	1362	+ Showing 21-30 of 100
	1363	+ </span>
	1364	+ <span class="col-span-2"></span>
	1365	+ <!-- Pagination -->
	1366	+ <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
	1367	+ <nav aria-label="Table navigation">
	1368	+ <ul class="inline-flex items-center">
	1369	+ <li>
	1370	+ <button
	1371	+ class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
	1372	+ aria-label="Previous"
	1373	+ >
	1374	+ <svg
	1375	+ aria-hidden="true"
	1376	+ class="w-4 h-4 fill-current"
	1377	+ viewBox="0 0 20 20"
	1378	+ >
	1379	+ <path
	1380	+ 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"
	1381	+ clip-rule="evenodd"
	1382	+ fill-rule="evenodd"
	1383	+ ></path>
	1384	+ </svg>
	1385	+ </button>
	1386	+ </li>
	1387	+ <li>
	1388	+ <button
	1389	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1390	+ >
	1391	+ 1
	1392	+ </button>
	1393	+ </li>
	1394	+ <li>
	1395	+ <button
	1396	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1397	+ >
	1398	+ 2
	1399	+ </button>
	1400	+ </li>
	1401	+ <li>
	1402	+ <button
	1403	+ class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple"
	1404	+ >
	1405	+ 3
	1406	+ </button>
	1407	+ </li>
	1408	+ <li>
	1409	+ <button
	1410	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1411	+ >
	1412	+ 4
	1413	+ </button>
	1414	+ </li>
	1415	+ <li>
	1416	+ <span class="px-3 py-1">...</span>
	1417	+ </li>
	1418	+ <li>
	1419	+ <button
	1420	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1421	+ >
	1422	+ 8
	1423	+ </button>
	1424	+ </li>
	1425	+ <li>
	1426	+ <button
	1427	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1428	+ >
	1429	+ 9
	1430	+ </button>
	1431	+ </li>
	1432	+ <li>
	1433	+ <button
	1434	+ class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
	1435	+ aria-label="Next"
	1436	+ >
	1437	+ <svg
	1438	+ class="w-4 h-4 fill-current"
	1439	+ aria-hidden="true"
	1440	+ viewBox="0 0 20 20"
	1441	+ >
	1442	+ <path
	1443	+ 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"
	1444	+ clip-rule="evenodd"
	1445	+ fill-rule="evenodd"
	1446	+ ></path>
	1447	+ </svg>
	1448	+ </button>
	1449	+ </li>
	1450	+ </ul>
	1451	+ </nav>
	1452	+ </span>
	1453	+ </div>
	1454	+ </div>
	1455	+
	1456	+ <!-- Charts -->
	1457	+ <h2
	1458	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	1459	+ >
	1460	+ Charts
	1461	+ </h2>
	1462	+ <div class="grid gap-6 mb-8 md:grid-cols-2">
	1463	+ <div
	1464	+ class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	1465	+ >
	1466	+ <h4 class="mb-4 font-semibold text-gray-800 dark:text-gray-300">
	1467	+ Revenue
	1468	+ </h4>
	1469	+ <canvas id="pie"></canvas>
	1470	+ <div
	1471	+ class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400"
	1472	+ >
	1473	+ <!-- Chart legend -->
	1474	+ <div class="flex items-center">
	1475	+ <span
	1476	+ class="inline-block w-3 h-3 mr-1 bg-blue-500 rounded-full"
	1477	+ ></span>
	1478	+ <span>Shirts</span>
	1479	+ </div>
	1480	+ <div class="flex items-center">
	1481	+ <span
	1482	+ class="inline-block w-3 h-3 mr-1 bg-teal-600 rounded-full"
	1483	+ ></span>
	1484	+ <span>Shoes</span>
	1485	+ </div>
	1486	+ <div class="flex items-center">
	1487	+ <span
	1488	+ class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"
	1489	+ ></span>
	1490	+ <span>Bags</span>
	1491	+ </div>
	1492	+ </div>
	1493	+ </div>
	1494	+ <div
	1495	+ class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
	1496	+ >
	1497	+ <h4 class="mb-4 font-semibold text-gray-800 dark:text-gray-300">
	1498	+ Traffic
	1499	+ </h4>
	1500	+ <canvas id="line"></canvas>
	1501	+ <div
	1502	+ class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400"
	1503	+ >
	1504	+ <!-- Chart legend -->
	1505	+ <div class="flex items-center">
	1506	+ <span
	1507	+ class="inline-block w-3 h-3 mr-1 bg-teal-600 rounded-full"
	1508	+ ></span>
	1509	+ <span>Organic</span>
	1510	+ </div>
	1511	+ <div class="flex items-center">
	1512	+ <span
	1513	+ class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"
	1514	+ ></span>
	1515	+ <span>Paid</span>
	1516	+ </div>
	1517	+ </div>
	1518	+ </div>
	1519	+ </div>
	1520	+ </div>
	1521	+ </main>
	1522	+ </div>
	1523	+ </div>
	1524	+ </body>
	1525	+</html>

html/public/modals.html

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,967 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Modals - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="./assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="./assets/js/init-alpine.js"></script>
	17	+ <!-- You need focus-trap.js to make the modal accessible -->
	18	+ <script src="./assets/js/focus-trap.js" defer></script>
	19	+ </head>
	20	+ <body>
	21	+ <div
	22	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	23	+ :class="{ 'overflow-hidden': isSideMenuOpen}"
	24	+ >
	25	+ <!-- Desktop sidebar -->
	26	+ <aside
	27	+ class="z-20 flex-shrink-0 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block"
	28	+ >
	29	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	30	+ <a
	31	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	32	+ href="#"
	33	+ >
	34	+ Windmill
	35	+ </a>
	36	+ <ul class="mt-6">
	37	+ <li class="relative px-6 py-3">
	38	+ <a
	39	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	40	+ href="index.html"
	41	+ >
	42	+ <svg
	43	+ class="w-5 h-5"
	44	+ aria-hidden="true"
	45	+ fill="none"
	46	+ stroke-linecap="round"
	47	+ stroke-linejoin="round"
	48	+ stroke-width="2"
	49	+ viewBox="0 0 24 24"
	50	+ stroke="currentColor"
	51	+ >
	52	+ <path
	53	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	54	+ ></path>
	55	+ </svg>
	56	+ <span class="ml-4">Dashboard</span>
	57	+ </a>
	58	+ </li>
	59	+ </ul>
	60	+ <ul>
	61	+ <li class="relative px-6 py-3">
	62	+ <a
	63	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	64	+ href="forms.html"
	65	+ >
	66	+ <svg
	67	+ class="w-5 h-5"
	68	+ aria-hidden="true"
	69	+ fill="none"
	70	+ stroke-linecap="round"
	71	+ stroke-linejoin="round"
	72	+ stroke-width="2"
	73	+ viewBox="0 0 24 24"
	74	+ stroke="currentColor"
	75	+ >
	76	+ <path
	77	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	78	+ ></path>
	79	+ </svg>
	80	+ <span class="ml-4">Forms</span>
	81	+ </a>
	82	+ </li>
	83	+ <li class="relative px-6 py-3">
	84	+ <a
	85	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	86	+ href="cards.html"
	87	+ >
	88	+ <svg
	89	+ class="w-5 h-5"
	90	+ aria-hidden="true"
	91	+ fill="none"
	92	+ stroke-linecap="round"
	93	+ stroke-linejoin="round"
	94	+ stroke-width="2"
	95	+ viewBox="0 0 24 24"
	96	+ stroke="currentColor"
	97	+ >
	98	+ <path
	99	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	100	+ ></path>
	101	+ </svg>
	102	+ <span class="ml-4">Cards</span>
	103	+ </a>
	104	+ </li>
	105	+ <li class="relative px-6 py-3">
	106	+ <a
	107	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	108	+ href="charts.html"
	109	+ >
	110	+ <svg
	111	+ class="w-5 h-5"
	112	+ aria-hidden="true"
	113	+ fill="none"
	114	+ stroke-linecap="round"
	115	+ stroke-linejoin="round"
	116	+ stroke-width="2"
	117	+ viewBox="0 0 24 24"
	118	+ stroke="currentColor"
	119	+ >
	120	+ <path
	121	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	122	+ ></path>
	123	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	124	+ </svg>
	125	+ <span class="ml-4">Charts</span>
	126	+ </a>
	127	+ </li>
	128	+ <li class="relative px-6 py-3">
	129	+ <a
	130	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	131	+ href="buttons.html"
	132	+ >
	133	+ <svg
	134	+ class="w-5 h-5"
	135	+ aria-hidden="true"
	136	+ fill="none"
	137	+ stroke-linecap="round"
	138	+ stroke-linejoin="round"
	139	+ stroke-width="2"
	140	+ viewBox="0 0 24 24"
	141	+ stroke="currentColor"
	142	+ >
	143	+ <path
	144	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	145	+ ></path>
	146	+ </svg>
	147	+ <span class="ml-4">Buttons</span>
	148	+ </a>
	149	+ </li>
	150	+ <li class="relative px-6 py-3">
	151	+ <span
	152	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	153	+ aria-hidden="true"
	154	+ ></span>
	155	+ <a
	156	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	157	+ href="modals.html"
	158	+ >
	159	+ <svg
	160	+ class="w-5 h-5"
	161	+ aria-hidden="true"
	162	+ fill="none"
	163	+ stroke-linecap="round"
	164	+ stroke-linejoin="round"
	165	+ stroke-width="2"
	166	+ viewBox="0 0 24 24"
	167	+ stroke="currentColor"
	168	+ >
	169	+ <path
	170	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	171	+ ></path>
	172	+ </svg>
	173	+ <span class="ml-4">Modals</span>
	174	+ </a>
	175	+ </li>
	176	+ <li class="relative px-6 py-3">
	177	+ <a
	178	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	179	+ href="tables.html"
	180	+ >
	181	+ <svg
	182	+ class="w-5 h-5"
	183	+ aria-hidden="true"
	184	+ fill="none"
	185	+ stroke-linecap="round"
	186	+ stroke-linejoin="round"
	187	+ stroke-width="2"
	188	+ viewBox="0 0 24 24"
	189	+ stroke="currentColor"
	190	+ >
	191	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	192	+ </svg>
	193	+ <span class="ml-4">Tables</span>
	194	+ </a>
	195	+ </li>
	196	+ <li class="relative px-6 py-3">
	197	+ <button
	198	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	199	+ @click="togglePagesMenu"
	200	+ aria-haspopup="true"
	201	+ >
	202	+ <span class="inline-flex items-center">
	203	+ <svg
	204	+ class="w-5 h-5"
	205	+ aria-hidden="true"
	206	+ fill="none"
	207	+ stroke-linecap="round"
	208	+ stroke-linejoin="round"
	209	+ stroke-width="2"
	210	+ viewBox="0 0 24 24"
	211	+ stroke="currentColor"
	212	+ >
	213	+ <path
	214	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	215	+ ></path>
	216	+ </svg>
	217	+ <span class="ml-4">Pages</span>
	218	+ </span>
	219	+ <svg
	220	+ class="w-4 h-4"
	221	+ aria-hidden="true"
	222	+ fill="currentColor"
	223	+ viewBox="0 0 20 20"
	224	+ >
	225	+ <path
	226	+ fill-rule="evenodd"
	227	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	228	+ clip-rule="evenodd"
	229	+ ></path>
	230	+ </svg>
	231	+ </button>
	232	+ <template x-if="isPagesMenuOpen">
	233	+ <ul
	234	+ x-transition:enter="transition-all ease-in-out duration-300"
	235	+ x-transition:enter-start="opacity-25 max-h-0"
	236	+ x-transition:enter-end="opacity-100 max-h-xl"
	237	+ x-transition:leave="transition-all ease-in-out duration-300"
	238	+ x-transition:leave-start="opacity-100 max-h-xl"
	239	+ x-transition:leave-end="opacity-0 max-h-0"
	240	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	241	+ aria-label="submenu"
	242	+ >
	243	+ <li
	244	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	245	+ >
	246	+ <a class="w-full" href="pages/login.html">Login</a>
	247	+ </li>
	248	+ <li
	249	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	250	+ >
	251	+ <a class="w-full" href="pages/create-account.html">
	252	+ Create account
	253	+ </a>
	254	+ </li>
	255	+ <li
	256	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	257	+ >
	258	+ <a class="w-full" href="pages/forgot-password.html">
	259	+ Forgot password
	260	+ </a>
	261	+ </li>
	262	+ <li
	263	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	264	+ >
	265	+ <a class="w-full" href="pages/404.html">404</a>
	266	+ </li>
	267	+ <li
	268	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	269	+ >
	270	+ <a class="w-full" href="pages/blank.html">Blank</a>
	271	+ </li>
	272	+ </ul>
	273	+ </template>
	274	+ </li>
	275	+ </ul>
	276	+ <div class="px-6 my-6">
	277	+ <button
	278	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	279	+ >
	280	+ Create account
	281	+ <span class="ml-2" aria-hidden="true">+</span>
	282	+ </button>
	283	+ </div>
	284	+ </div>
	285	+ </aside>
	286	+ <!-- Mobile sidebar -->
	287	+ <!-- Backdrop -->
	288	+ <div
	289	+ x-show="isSideMenuOpen"
	290	+ x-transition:enter="transition ease-in-out duration-150"
	291	+ x-transition:enter-start="opacity-0"
	292	+ x-transition:enter-end="opacity-100"
	293	+ x-transition:leave="transition ease-in-out duration-150"
	294	+ x-transition:leave-start="opacity-100"
	295	+ x-transition:leave-end="opacity-0"
	296	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	297	+ ></div>
	298	+ <aside
	299	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	300	+ x-show="isSideMenuOpen"
	301	+ x-transition:enter="transition ease-in-out duration-150"
	302	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	303	+ x-transition:enter-end="opacity-100"
	304	+ x-transition:leave="transition ease-in-out duration-150"
	305	+ x-transition:leave-start="opacity-100"
	306	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	307	+ @click.away="closeSideMenu"
	308	+ @keydown.escape="closeSideMenu"
	309	+ >
	310	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	311	+ <a
	312	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	313	+ href="#"
	314	+ >
	315	+ Windmill
	316	+ </a>
	317	+ <ul class="mt-6">
	318	+ <li class="relative px-6 py-3">
	319	+ <a
	320	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	321	+ href="index.html"
	322	+ >
	323	+ <svg
	324	+ class="w-5 h-5"
	325	+ aria-hidden="true"
	326	+ fill="none"
	327	+ stroke-linecap="round"
	328	+ stroke-linejoin="round"
	329	+ stroke-width="2"
	330	+ viewBox="0 0 24 24"
	331	+ stroke="currentColor"
	332	+ >
	333	+ <path
	334	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	335	+ ></path>
	336	+ </svg>
	337	+ <span class="ml-4">Dashboard</span>
	338	+ </a>
	339	+ </li>
	340	+ </ul>
	341	+ <ul>
	342	+ <li class="relative px-6 py-3">
	343	+ <a
	344	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	345	+ href="forms.html"
	346	+ >
	347	+ <svg
	348	+ class="w-5 h-5"
	349	+ aria-hidden="true"
	350	+ fill="none"
	351	+ stroke-linecap="round"
	352	+ stroke-linejoin="round"
	353	+ stroke-width="2"
	354	+ viewBox="0 0 24 24"
	355	+ stroke="currentColor"
	356	+ >
	357	+ <path
	358	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	359	+ ></path>
	360	+ </svg>
	361	+ <span class="ml-4">Forms</span>
	362	+ </a>
	363	+ </li>
	364	+ <li class="relative px-6 py-3">
	365	+ <a
	366	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	367	+ href="cards.html"
	368	+ >
	369	+ <svg
	370	+ class="w-5 h-5"
	371	+ aria-hidden="true"
	372	+ fill="none"
	373	+ stroke-linecap="round"
	374	+ stroke-linejoin="round"
	375	+ stroke-width="2"
	376	+ viewBox="0 0 24 24"
	377	+ stroke="currentColor"
	378	+ >
	379	+ <path
	380	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	381	+ ></path>
	382	+ </svg>
	383	+ <span class="ml-4">Cards</span>
	384	+ </a>
	385	+ </li>
	386	+ <li class="relative px-6 py-3">
	387	+ <a
	388	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	389	+ href="charts.html"
	390	+ >
	391	+ <svg
	392	+ class="w-5 h-5"
	393	+ aria-hidden="true"
	394	+ fill="none"
	395	+ stroke-linecap="round"
	396	+ stroke-linejoin="round"
	397	+ stroke-width="2"
	398	+ viewBox="0 0 24 24"
	399	+ stroke="currentColor"
	400	+ >
	401	+ <path
	402	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	403	+ ></path>
	404	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	405	+ </svg>
	406	+ <span class="ml-4">Charts</span>
	407	+ </a>
	408	+ </li>
	409	+ <li class="relative px-6 py-3">
	410	+ <a
	411	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	412	+ href="buttons.html"
	413	+ >
	414	+ <svg
	415	+ class="w-5 h-5"
	416	+ aria-hidden="true"
	417	+ fill="none"
	418	+ stroke-linecap="round"
	419	+ stroke-linejoin="round"
	420	+ stroke-width="2"
	421	+ viewBox="0 0 24 24"
	422	+ stroke="currentColor"
	423	+ >
	424	+ <path
	425	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	426	+ ></path>
	427	+ </svg>
	428	+ <span class="ml-4">Buttons</span>
	429	+ </a>
	430	+ </li>
	431	+ <li class="relative px-6 py-3">
	432	+ <span
	433	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	434	+ aria-hidden="true"
	435	+ ></span>
	436	+ <a
	437	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	438	+ href="modals.html"
	439	+ >
	440	+ <svg
	441	+ class="w-5 h-5"
	442	+ aria-hidden="true"
	443	+ fill="none"
	444	+ stroke-linecap="round"
	445	+ stroke-linejoin="round"
	446	+ stroke-width="2"
	447	+ viewBox="0 0 24 24"
	448	+ stroke="currentColor"
	449	+ >
	450	+ <path
	451	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	452	+ ></path>
	453	+ </svg>
	454	+ <span class="ml-4">Modals</span>
	455	+ </a>
	456	+ </li>
	457	+ <li class="relative px-6 py-3">
	458	+ <a
	459	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	460	+ href="tables.html"
	461	+ >
	462	+ <svg
	463	+ class="w-5 h-5"
	464	+ aria-hidden="true"
	465	+ fill="none"
	466	+ stroke-linecap="round"
	467	+ stroke-linejoin="round"
	468	+ stroke-width="2"
	469	+ viewBox="0 0 24 24"
	470	+ stroke="currentColor"
	471	+ >
	472	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	473	+ </svg>
	474	+ <span class="ml-4">Tables</span>
	475	+ </a>
	476	+ </li>
	477	+ <li class="relative px-6 py-3">
	478	+ <button
	479	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	480	+ @click="togglePagesMenu"
	481	+ aria-haspopup="true"
	482	+ >
	483	+ <span class="inline-flex items-center">
	484	+ <svg
	485	+ class="w-5 h-5"
	486	+ aria-hidden="true"
	487	+ fill="none"
	488	+ stroke-linecap="round"
	489	+ stroke-linejoin="round"
	490	+ stroke-width="2"
	491	+ viewBox="0 0 24 24"
	492	+ stroke="currentColor"
	493	+ >
	494	+ <path
	495	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	496	+ ></path>
	497	+ </svg>
	498	+ <span class="ml-4">Pages</span>
	499	+ </span>
	500	+ <svg
	501	+ class="w-4 h-4"
	502	+ aria-hidden="true"
	503	+ fill="currentColor"
	504	+ viewBox="0 0 20 20"
	505	+ >
	506	+ <path
	507	+ fill-rule="evenodd"
	508	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	509	+ clip-rule="evenodd"
	510	+ ></path>
	511	+ </svg>
	512	+ </button>
	513	+ <template x-if="isPagesMenuOpen">
	514	+ <ul
	515	+ x-transition:enter="transition-all ease-in-out duration-300"
	516	+ x-transition:enter-start="opacity-25 max-h-0"
	517	+ x-transition:enter-end="opacity-100 max-h-xl"
	518	+ x-transition:leave="transition-all ease-in-out duration-300"
	519	+ x-transition:leave-start="opacity-100 max-h-xl"
	520	+ x-transition:leave-end="opacity-0 max-h-0"
	521	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	522	+ aria-label="submenu"
	523	+ >
	524	+ <li
	525	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	526	+ >
	527	+ <a class="w-full" href="pages/login.html">Login</a>
	528	+ </li>
	529	+ <li
	530	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	531	+ >
	532	+ <a class="w-full" href="pages/create-account.html">
	533	+ Create account
	534	+ </a>
	535	+ </li>
	536	+ <li
	537	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	538	+ >
	539	+ <a class="w-full" href="pages/forgot-password.html">
	540	+ Forgot password
	541	+ </a>
	542	+ </li>
	543	+ <li
	544	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	545	+ >
	546	+ <a class="w-full" href="pages/404.html">404</a>
	547	+ </li>
	548	+ <li
	549	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	550	+ >
	551	+ <a class="w-full" href="pages/blank.html">Blank</a>
	552	+ </li>
	553	+ </ul>
	554	+ </template>
	555	+ </li>
	556	+ </ul>
	557	+ <div class="px-6 my-6">
	558	+ <button
	559	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	560	+ >
	561	+ Create account
	562	+ <span class="ml-2" aria-hidden="true">+</span>
	563	+ </button>
	564	+ </div>
	565	+ </div>
	566	+ </aside>
	567	+ <div class="flex flex-col flex-1">
	568	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	569	+ <div
	570	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	571	+ >
	572	+ <!-- Mobile hamburger -->
	573	+ <button
	574	+ class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	575	+ @click="toggleSideMenu"
	576	+ aria-label="Menu"
	577	+ >
	578	+ <svg
	579	+ class="w-6 h-6"
	580	+ aria-hidden="true"
	581	+ fill="currentColor"
	582	+ viewBox="0 0 20 20"
	583	+ >
	584	+ <path
	585	+ fill-rule="evenodd"
	586	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	587	+ clip-rule="evenodd"
	588	+ ></path>
	589	+ </svg>
	590	+ </button>
	591	+ <!-- Search input -->
	592	+ <div class="flex justify-center flex-1 lg:mr-32">
	593	+ <div
	594	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	595	+ >
	596	+ <div class="absolute inset-y-0 flex items-center pl-2">
	597	+ <svg
	598	+ class="w-4 h-4"
	599	+ aria-hidden="true"
	600	+ fill="currentColor"
	601	+ viewBox="0 0 20 20"
	602	+ >
	603	+ <path
	604	+ fill-rule="evenodd"
	605	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	606	+ clip-rule="evenodd"
	607	+ ></path>
	608	+ </svg>
	609	+ </div>
	610	+ <input
	611	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	612	+ type="text"
	613	+ placeholder="Search for projects"
	614	+ aria-label="Search"
	615	+ />
	616	+ </div>
	617	+ </div>
	618	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	619	+ <!-- Theme toggler -->
	620	+ <li class="flex">
	621	+ <button
	622	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	623	+ @click="toggleTheme"
	624	+ aria-label="Toggle color mode"
	625	+ >
	626	+ <template x-if="!dark">
	627	+ <svg
	628	+ class="w-5 h-5"
	629	+ aria-hidden="true"
	630	+ fill="currentColor"
	631	+ viewBox="0 0 20 20"
	632	+ >
	633	+ <path
	634	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	635	+ ></path>
	636	+ </svg>
	637	+ </template>
	638	+ <template x-if="dark">
	639	+ <svg
	640	+ class="w-5 h-5"
	641	+ aria-hidden="true"
	642	+ fill="currentColor"
	643	+ viewBox="0 0 20 20"
	644	+ >
	645	+ <path
	646	+ fill-rule="evenodd"
	647	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	648	+ clip-rule="evenodd"
	649	+ ></path>
	650	+ </svg>
	651	+ </template>
	652	+ </button>
	653	+ </li>
	654	+ <!-- Notifications menu -->
	655	+ <li class="relative">
	656	+ <button
	657	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	658	+ @click="toggleNotificationsMenu"
	659	+ @keydown.escape="closeNotificationsMenu"
	660	+ aria-label="Notifications"
	661	+ aria-haspopup="true"
	662	+ >
	663	+ <svg
	664	+ class="w-5 h-5"
	665	+ aria-hidden="true"
	666	+ fill="currentColor"
	667	+ viewBox="0 0 20 20"
	668	+ >
	669	+ <path
	670	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	671	+ ></path>
	672	+ </svg>
	673	+ <!-- Notification badge -->
	674	+ <span
	675	+ aria-hidden="true"
	676	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	677	+ ></span>
	678	+ </button>
	679	+ <template x-if="isNotificationsMenuOpen">
	680	+ <ul
	681	+ x-transition:leave="transition ease-in duration-150"
	682	+ x-transition:leave-start="opacity-100"
	683	+ x-transition:leave-end="opacity-0"
	684	+ @click.away="closeNotificationsMenu"
	685	+ @keydown.escape="closeNotificationsMenu"
	686	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	687	+ aria-label="submenu"
	688	+ >
	689	+ <li class="flex">
	690	+ <a
	691	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	692	+ href="#"
	693	+ >
	694	+ <span>Messages</span>
	695	+ <span
	696	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	697	+ >
	698	+ 13
	699	+ </span>
	700	+ </a>
	701	+ </li>
	702	+ <li class="flex">
	703	+ <a
	704	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	705	+ href="#"
	706	+ >
	707	+ <span>Sales</span>
	708	+ <span
	709	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	710	+ >
	711	+ 2
	712	+ </span>
	713	+ </a>
	714	+ </li>
	715	+ <li class="flex">
	716	+ <a
	717	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	718	+ href="#"
	719	+ >
	720	+ <span>Alerts</span>
	721	+ </a>
	722	+ </li>
	723	+ </ul>
	724	+ </template>
	725	+ </li>
	726	+ <!-- Profile menu -->
	727	+ <li class="relative">
	728	+ <button
	729	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	730	+ @click="toggleProfileMenu"
	731	+ @keydown.escape="closeProfileMenu"
	732	+ aria-label="Account"
	733	+ aria-haspopup="true"
	734	+ >
	735	+ <img
	736	+ class="object-cover w-8 h-8 rounded-full"
	737	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	738	+ alt=""
	739	+ aria-hidden="true"
	740	+ />
	741	+ </button>
	742	+ <template x-if="isProfileMenuOpen">
	743	+ <ul
	744	+ x-transition:leave="transition ease-in duration-150"
	745	+ x-transition:leave-start="opacity-100"
	746	+ x-transition:leave-end="opacity-0"
	747	+ @click.away="closeProfileMenu"
	748	+ @keydown.escape="closeProfileMenu"
	749	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	750	+ aria-label="submenu"
	751	+ >
	752	+ <li class="flex">
	753	+ <a
	754	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	755	+ href="#"
	756	+ >
	757	+ <svg
	758	+ class="w-4 h-4 mr-3"
	759	+ aria-hidden="true"
	760	+ fill="none"
	761	+ stroke-linecap="round"
	762	+ stroke-linejoin="round"
	763	+ stroke-width="2"
	764	+ viewBox="0 0 24 24"
	765	+ stroke="currentColor"
	766	+ >
	767	+ <path
	768	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	769	+ ></path>
	770	+ </svg>
	771	+ <span>Profile</span>
	772	+ </a>
	773	+ </li>
	774	+ <li class="flex">
	775	+ <a
	776	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	777	+ href="#"
	778	+ >
	779	+ <svg
	780	+ class="w-4 h-4 mr-3"
	781	+ aria-hidden="true"
	782	+ fill="none"
	783	+ stroke-linecap="round"
	784	+ stroke-linejoin="round"
	785	+ stroke-width="2"
	786	+ viewBox="0 0 24 24"
	787	+ stroke="currentColor"
	788	+ >
	789	+ <path
	790	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	791	+ ></path>
	792	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	793	+ </svg>
	794	+ <span>Settings</span>
	795	+ </a>
	796	+ </li>
	797	+ <li class="flex">
	798	+ <a
	799	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	800	+ href="#"
	801	+ >
	802	+ <svg
	803	+ class="w-4 h-4 mr-3"
	804	+ aria-hidden="true"
	805	+ fill="none"
	806	+ stroke-linecap="round"
	807	+ stroke-linejoin="round"
	808	+ stroke-width="2"
	809	+ viewBox="0 0 24 24"
	810	+ stroke="currentColor"
	811	+ >
	812	+ <path
	813	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	814	+ ></path>
	815	+ </svg>
	816	+ <span>Log out</span>
	817	+ </a>
	818	+ </li>
	819	+ </ul>
	820	+ </template>
	821	+ </li>
	822	+ </ul>
	823	+ </div>
	824	+ </header>
	825	+ <main class="h-full pb-16 overflow-y-auto">
	826	+ <div class="container grid px-6 mx-auto">
	827	+ <h2
	828	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	829	+ >
	830	+ Modals
	831	+ </h2>
	832	+ <!-- CTA -->
	833	+ <a
	834	+ class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
	835	+ href="https://github.com/estevanmaito/windmill-dashboard"
	836	+ >
	837	+ <div class="flex items-center">
	838	+ <svg
	839	+ class="w-5 h-5 mr-2"
	840	+ fill="currentColor"
	841	+ viewBox="0 0 20 20"
	842	+ >
	843	+ <path
	844	+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
	845	+ ></path>
	846	+ </svg>
	847	+ <span>Star this project on GitHub</span>
	848	+ </div>
	849	+ <span>View more &RightArrow;</span>
	850	+ </a>
	851	+
	852	+ <div
	853	+ class="max-w-2xl px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
	854	+ >
	855	+ <p class="mb-4 text-gray-600 dark:text-gray-400">
	856	+ This is possibly
	857	+ <strong>the most accessible a modal can get</strong>
	858	+ , using JavaScript. When opened, it uses
	859	+ <code>assets/js/focus-trap.js</code>
	860	+ to create a
	861	+ <em>focus trap</em>
	862	+ , which means that if you use your keyboard to navigate around,
	863	+ focus won't leak to the elements behind, staying inside the
	864	+ modal in a loop, until you take any action.
	865	+ </p>
	866	+
	867	+ <p class="text-gray-600 dark:text-gray-400">
	868	+ Also, on small screens it is placed at the bottom of the screen,
	869	+ to account for larger devices and make it easier to click the
	870	+ larger buttons.
	871	+ </p>
	872	+ </div>
	873	+
	874	+ <div>
	875	+ <button
	876	+ @click="openModal"
	877	+ class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	878	+ >
	879	+ Open Modal
	880	+ </button>
	881	+ </div>
	882	+ </div>
	883	+ </main>
	884	+ </div>
	885	+ </div>
	886	+ <!-- Modal backdrop. This what you want to place close to the closing body tag -->
	887	+ <div
	888	+ x-show="isModalOpen"
	889	+ x-transition:enter="transition ease-out duration-150"
	890	+ x-transition:enter-start="opacity-0"
	891	+ x-transition:enter-end="opacity-100"
	892	+ x-transition:leave="transition ease-in duration-150"
	893	+ x-transition:leave-start="opacity-100"
	894	+ x-transition:leave-end="opacity-0"
	895	+ class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	896	+ >
	897	+ <!-- Modal -->
	898	+ <div
	899	+ x-show="isModalOpen"
	900	+ x-transition:enter="transition ease-out duration-150"
	901	+ x-transition:enter-start="opacity-0 transform translate-y-1/2"
	902	+ x-transition:enter-end="opacity-100"
	903	+ x-transition:leave="transition ease-in duration-150"
	904	+ x-transition:leave-start="opacity-100"
	905	+ x-transition:leave-end="opacity-0 transform translate-y-1/2"
	906	+ @click.away="closeModal"
	907	+ @keydown.escape="closeModal"
	908	+ class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"
	909	+ role="dialog"
	910	+ id="modal"
	911	+ >
	912	+ <!-- Remove header if you don't want a close icon. Use modal body to place modal tile. -->
	913	+ <header class="flex justify-end">
	914	+ <button
	915	+ class="inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700"
	916	+ aria-label="close"
	917	+ @click="closeModal"
	918	+ >
	919	+ <svg
	920	+ class="w-4 h-4"
	921	+ fill="currentColor"
	922	+ viewBox="0 0 20 20"
	923	+ role="img"
	924	+ aria-hidden="true"
	925	+ >
	926	+ <path
	927	+ d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
	928	+ clip-rule="evenodd"
	929	+ fill-rule="evenodd"
	930	+ ></path>
	931	+ </svg>
	932	+ </button>
	933	+ </header>
	934	+ <!-- Modal body -->
	935	+ <div class="mt-4 mb-6">
	936	+ <!-- Modal title -->
	937	+ <p
	938	+ class="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300"
	939	+ >
	940	+ Modal header
	941	+ </p>
	942	+ <!-- Modal description -->
	943	+ <p class="text-sm text-gray-700 dark:text-gray-400">
	944	+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum et
	945	+ eligendi repudiandae voluptatem tempore!
	946	+ </p>
	947	+ </div>
	948	+ <footer
	949	+ class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-50 dark:bg-gray-800"
	950	+ >
	951	+ <button
	952	+ @click="closeModal"
	953	+ class="w-full px-5 py-3 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
	954	+ >
	955	+ Cancel
	956	+ </button>
	957	+ <button
	958	+ class="w-full px-5 py-3 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg sm:w-auto sm:px-4 sm:py-2 active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	959	+ >
	960	+ Accept
	961	+ </button>
	962	+ </footer>
	963	+ </div>
	964	+ </div>
	965	+ <!-- End of modal backdrop -->
	966	+ </body>
	967	+</html>

html/public/pages/404.html

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,862 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>404 - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="../assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="../assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div
	20	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	21	+ :class="{ 'overflow-hidden': isSideMenuOpen}"
	22	+ >
	23	+ <!-- Desktop sidebar -->
	24	+ <aside
	25	+ class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0"
	26	+ >
	27	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	28	+ <a
	29	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	30	+ href="#"
	31	+ >
	32	+ Windmill
	33	+ </a>
	34	+ <ul class="mt-6">
	35	+ <li class="relative px-6 py-3">
	36	+ <!-- Active items have the snippet below -->
	37	+ <!-- <span
	38	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	39	+ aria-hidden="true"
	40	+ ></span> -->
	41	+
	42	+ <!-- Add this classes to an active anchor (a tag) -->
	43	+ <!-- text-gray-800 dark:text-gray-100 -->
	44	+ <a
	45	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	46	+ href="../index.html"
	47	+ >
	48	+ <svg
	49	+ class="w-5 h-5"
	50	+ aria-hidden="true"
	51	+ fill="none"
	52	+ stroke-linecap="round"
	53	+ stroke-linejoin="round"
	54	+ stroke-width="2"
	55	+ viewBox="0 0 24 24"
	56	+ stroke="currentColor"
	57	+ >
	58	+ <path
	59	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	60	+ ></path>
	61	+ </svg>
	62	+ <span class="ml-4">Dashboard</span>
	63	+ </a>
	64	+ </li>
	65	+ </ul>
	66	+ <ul>
	67	+ <li class="relative px-6 py-3">
	68	+ <a
	69	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	70	+ href="../forms.html"
	71	+ >
	72	+ <svg
	73	+ class="w-5 h-5"
	74	+ aria-hidden="true"
	75	+ fill="none"
	76	+ stroke-linecap="round"
	77	+ stroke-linejoin="round"
	78	+ stroke-width="2"
	79	+ viewBox="0 0 24 24"
	80	+ stroke="currentColor"
	81	+ >
	82	+ <path
	83	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	84	+ ></path>
	85	+ </svg>
	86	+ <span class="ml-4">Forms</span>
	87	+ </a>
	88	+ </li>
	89	+ <li class="relative px-6 py-3">
	90	+ <a
	91	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	92	+ href="../cards.html"
	93	+ >
	94	+ <svg
	95	+ class="w-5 h-5"
	96	+ aria-hidden="true"
	97	+ fill="none"
	98	+ stroke-linecap="round"
	99	+ stroke-linejoin="round"
	100	+ stroke-width="2"
	101	+ viewBox="0 0 24 24"
	102	+ stroke="currentColor"
	103	+ >
	104	+ <path
	105	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	106	+ ></path>
	107	+ </svg>
	108	+ <span class="ml-4">Cards</span>
	109	+ </a>
	110	+ </li>
	111	+ <li class="relative px-6 py-3">
	112	+ <a
	113	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	114	+ href="../charts.html"
	115	+ >
	116	+ <svg
	117	+ class="w-5 h-5"
	118	+ aria-hidden="true"
	119	+ fill="none"
	120	+ stroke-linecap="round"
	121	+ stroke-linejoin="round"
	122	+ stroke-width="2"
	123	+ viewBox="0 0 24 24"
	124	+ stroke="currentColor"
	125	+ >
	126	+ <path
	127	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	128	+ ></path>
	129	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	130	+ </svg>
	131	+ <span class="ml-4">Charts</span>
	132	+ </a>
	133	+ </li>
	134	+ <li class="relative px-6 py-3">
	135	+ <a
	136	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	137	+ href="../buttons.html"
	138	+ >
	139	+ <svg
	140	+ class="w-5 h-5"
	141	+ aria-hidden="true"
	142	+ fill="none"
	143	+ stroke-linecap="round"
	144	+ stroke-linejoin="round"
	145	+ stroke-width="2"
	146	+ viewBox="0 0 24 24"
	147	+ stroke="currentColor"
	148	+ >
	149	+ <path
	150	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	151	+ ></path>
	152	+ </svg>
	153	+ <span class="ml-4">Buttons</span>
	154	+ </a>
	155	+ </li>
	156	+ <li class="relative px-6 py-3">
	157	+ <a
	158	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	159	+ href="../modals.html"
	160	+ >
	161	+ <svg
	162	+ class="w-5 h-5"
	163	+ aria-hidden="true"
	164	+ fill="none"
	165	+ stroke-linecap="round"
	166	+ stroke-linejoin="round"
	167	+ stroke-width="2"
	168	+ viewBox="0 0 24 24"
	169	+ stroke="currentColor"
	170	+ >
	171	+ <path
	172	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	173	+ ></path>
	174	+ </svg>
	175	+ <span class="ml-4">Modals</span>
	176	+ </a>
	177	+ </li>
	178	+ <li class="relative px-6 py-3">
	179	+ <a
	180	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	181	+ href="../tables.html"
	182	+ >
	183	+ <svg
	184	+ class="w-5 h-5"
	185	+ aria-hidden="true"
	186	+ fill="none"
	187	+ stroke-linecap="round"
	188	+ stroke-linejoin="round"
	189	+ stroke-width="2"
	190	+ viewBox="0 0 24 24"
	191	+ stroke="currentColor"
	192	+ >
	193	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	194	+ </svg>
	195	+ <span class="ml-4">Tables</span>
	196	+ </a>
	197	+ </li>
	198	+ <li class="relative px-6 py-3">
	199	+ <button
	200	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	201	+ @click="togglePagesMenu"
	202	+ aria-haspopup="true"
	203	+ >
	204	+ <span class="inline-flex items-center">
	205	+ <svg
	206	+ class="w-5 h-5"
	207	+ aria-hidden="true"
	208	+ fill="none"
	209	+ stroke-linecap="round"
	210	+ stroke-linejoin="round"
	211	+ stroke-width="2"
	212	+ viewBox="0 0 24 24"
	213	+ stroke="currentColor"
	214	+ >
	215	+ <path
	216	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	217	+ ></path>
	218	+ </svg>
	219	+ <span class="ml-4">Pages</span>
	220	+ </span>
	221	+ <svg
	222	+ class="w-4 h-4"
	223	+ aria-hidden="true"
	224	+ fill="currentColor"
	225	+ viewBox="0 0 20 20"
	226	+ >
	227	+ <path
	228	+ fill-rule="evenodd"
	229	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	230	+ clip-rule="evenodd"
	231	+ ></path>
	232	+ </svg>
	233	+ </button>
	234	+ <template x-if="isPagesMenuOpen">
	235	+ <ul
	236	+ x-transition:enter="transition-all ease-in-out duration-300"
	237	+ x-transition:enter-start="opacity-25 max-h-0"
	238	+ x-transition:enter-end="opacity-100 max-h-xl"
	239	+ x-transition:leave="transition-all ease-in-out duration-300"
	240	+ x-transition:leave-start="opacity-100 max-h-xl"
	241	+ x-transition:leave-end="opacity-0 max-h-0"
	242	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	243	+ aria-label="submenu"
	244	+ >
	245	+ <li
	246	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	247	+ >
	248	+ <a class="w-full" href="./login.html">Login</a>
	249	+ </li>
	250	+ <li
	251	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	252	+ >
	253	+ <a class="w-full" href="./create-account.html">
	254	+ Create account
	255	+ </a>
	256	+ </li>
	257	+ <li
	258	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	259	+ >
	260	+ <a class="w-full" href="./forgot-password.html">
	261	+ Forgot password
	262	+ </a>
	263	+ </li>
	264	+ <li
	265	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	266	+ >
	267	+ <a class="w-full" href="./404.html">404</a>
	268	+ </li>
	269	+ <li
	270	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	271	+ >
	272	+ <a class="w-full" href="./blank.html">Blank</a>
	273	+ </li>
	274	+ </ul>
	275	+ </template>
	276	+ </li>
	277	+ </ul>
	278	+ <div class="px-6 my-6">
	279	+ <button
	280	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	281	+ >
	282	+ Create account
	283	+ <span class="ml-2" aria-hidden="true">+</span>
	284	+ </button>
	285	+ </div>
	286	+ </div>
	287	+ </aside>
	288	+ <!-- Mobile sidebar -->
	289	+ <!-- Backdrop -->
	290	+ <div
	291	+ x-show="isSideMenuOpen"
	292	+ x-transition:enter="transition ease-in-out duration-150"
	293	+ x-transition:enter-start="opacity-0"
	294	+ x-transition:enter-end="opacity-100"
	295	+ x-transition:leave="transition ease-in-out duration-150"
	296	+ x-transition:leave-start="opacity-100"
	297	+ x-transition:leave-end="opacity-0"
	298	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	299	+ ></div>
	300	+ <aside
	301	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	302	+ x-show="isSideMenuOpen"
	303	+ x-transition:enter="transition ease-in-out duration-150"
	304	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	305	+ x-transition:enter-end="opacity-100"
	306	+ x-transition:leave="transition ease-in-out duration-150"
	307	+ x-transition:leave-start="opacity-100"
	308	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	309	+ @click.away="closeSideMenu"
	310	+ @keydown.escape="closeSideMenu"
	311	+ >
	312	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	313	+ <a
	314	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	315	+ href="#"
	316	+ >
	317	+ Windmill
	318	+ </a>
	319	+ <ul class="mt-6">
	320	+ <li class="relative px-6 py-3">
	321	+ <!-- Active items have the snippet below -->
	322	+ <!-- <span
	323	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	324	+ aria-hidden="true"
	325	+ ></span> -->
	326	+
	327	+ <!-- Add this classes to an active anchor (a tag) -->
	328	+ <!-- text-gray-800 dark:text-gray-100 -->
	329	+ <a
	330	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	331	+ href="../index.html"
	332	+ >
	333	+ <svg
	334	+ class="w-5 h-5"
	335	+ aria-hidden="true"
	336	+ fill="none"
	337	+ stroke-linecap="round"
	338	+ stroke-linejoin="round"
	339	+ stroke-width="2"
	340	+ viewBox="0 0 24 24"
	341	+ stroke="currentColor"
	342	+ >
	343	+ <path
	344	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	345	+ ></path>
	346	+ </svg>
	347	+ <span class="ml-4">Dashboard</span>
	348	+ </a>
	349	+ </li>
	350	+ </ul>
	351	+ <ul>
	352	+ <li class="relative px-6 py-3">
	353	+ <a
	354	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	355	+ href="../forms.html"
	356	+ >
	357	+ <svg
	358	+ class="w-5 h-5"
	359	+ aria-hidden="true"
	360	+ fill="none"
	361	+ stroke-linecap="round"
	362	+ stroke-linejoin="round"
	363	+ stroke-width="2"
	364	+ viewBox="0 0 24 24"
	365	+ stroke="currentColor"
	366	+ >
	367	+ <path
	368	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	369	+ ></path>
	370	+ </svg>
	371	+ <span class="ml-4">Forms</span>
	372	+ </a>
	373	+ </li>
	374	+ <li class="relative px-6 py-3">
	375	+ <a
	376	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	377	+ href="../cards.html"
	378	+ >
	379	+ <svg
	380	+ class="w-5 h-5"
	381	+ aria-hidden="true"
	382	+ fill="none"
	383	+ stroke-linecap="round"
	384	+ stroke-linejoin="round"
	385	+ stroke-width="2"
	386	+ viewBox="0 0 24 24"
	387	+ stroke="currentColor"
	388	+ >
	389	+ <path
	390	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	391	+ ></path>
	392	+ </svg>
	393	+ <span class="ml-4">Cards</span>
	394	+ </a>
	395	+ </li>
	396	+ <li class="relative px-6 py-3">
	397	+ <a
	398	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	399	+ href="../charts.html"
	400	+ >
	401	+ <svg
	402	+ class="w-5 h-5"
	403	+ aria-hidden="true"
	404	+ fill="none"
	405	+ stroke-linecap="round"
	406	+ stroke-linejoin="round"
	407	+ stroke-width="2"
	408	+ viewBox="0 0 24 24"
	409	+ stroke="currentColor"
	410	+ >
	411	+ <path
	412	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	413	+ ></path>
	414	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	415	+ </svg>
	416	+ <span class="ml-4">Charts</span>
	417	+ </a>
	418	+ </li>
	419	+ <li class="relative px-6 py-3">
	420	+ <a
	421	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	422	+ href="../buttons.html"
	423	+ >
	424	+ <svg
	425	+ class="w-5 h-5"
	426	+ aria-hidden="true"
	427	+ fill="none"
	428	+ stroke-linecap="round"
	429	+ stroke-linejoin="round"
	430	+ stroke-width="2"
	431	+ viewBox="0 0 24 24"
	432	+ stroke="currentColor"
	433	+ >
	434	+ <path
	435	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	436	+ ></path>
	437	+ </svg>
	438	+ <span class="ml-4">Buttons</span>
	439	+ </a>
	440	+ </li>
	441	+ <li class="relative px-6 py-3">
	442	+ <a
	443	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	444	+ href="../modals.html"
	445	+ >
	446	+ <svg
	447	+ class="w-5 h-5"
	448	+ aria-hidden="true"
	449	+ fill="none"
	450	+ stroke-linecap="round"
	451	+ stroke-linejoin="round"
	452	+ stroke-width="2"
	453	+ viewBox="0 0 24 24"
	454	+ stroke="currentColor"
	455	+ >
	456	+ <path
	457	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	458	+ ></path>
	459	+ </svg>
	460	+ <span class="ml-4">Modals</span>
	461	+ </a>
	462	+ </li>
	463	+ <li class="relative px-6 py-3">
	464	+ <a
	465	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	466	+ href="../tables.html"
	467	+ >
	468	+ <svg
	469	+ class="w-5 h-5"
	470	+ aria-hidden="true"
	471	+ fill="none"
	472	+ stroke-linecap="round"
	473	+ stroke-linejoin="round"
	474	+ stroke-width="2"
	475	+ viewBox="0 0 24 24"
	476	+ stroke="currentColor"
	477	+ >
	478	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	479	+ </svg>
	480	+ <span class="ml-4">Tables</span>
	481	+ </a>
	482	+ </li>
	483	+ <li class="relative px-6 py-3">
	484	+ <button
	485	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	486	+ @click="togglePagesMenu"
	487	+ aria-haspopup="true"
	488	+ >
	489	+ <span class="inline-flex items-center">
	490	+ <svg
	491	+ class="w-5 h-5"
	492	+ aria-hidden="true"
	493	+ fill="none"
	494	+ stroke-linecap="round"
	495	+ stroke-linejoin="round"
	496	+ stroke-width="2"
	497	+ viewBox="0 0 24 24"
	498	+ stroke="currentColor"
	499	+ >
	500	+ <path
	501	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	502	+ ></path>
	503	+ </svg>
	504	+ <span class="ml-4">Pages</span>
	505	+ </span>
	506	+ <svg
	507	+ class="w-4 h-4"
	508	+ aria-hidden="true"
	509	+ fill="currentColor"
	510	+ viewBox="0 0 20 20"
	511	+ >
	512	+ <path
	513	+ fill-rule="evenodd"
	514	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	515	+ clip-rule="evenodd"
	516	+ ></path>
	517	+ </svg>
	518	+ </button>
	519	+ <template x-if="isPagesMenuOpen">
	520	+ <ul
	521	+ x-transition:enter="transition-all ease-in-out duration-300"
	522	+ x-transition:enter-start="opacity-25 max-h-0"
	523	+ x-transition:enter-end="opacity-100 max-h-xl"
	524	+ x-transition:leave="transition-all ease-in-out duration-300"
	525	+ x-transition:leave-start="opacity-100 max-h-xl"
	526	+ x-transition:leave-end="opacity-0 max-h-0"
	527	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	528	+ aria-label="submenu"
	529	+ >
	530	+ <li
	531	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	532	+ >
	533	+ <a class="w-full" href="./login.html">Login</a>
	534	+ </li>
	535	+ <li
	536	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	537	+ >
	538	+ <a class="w-full" href="./create-account.html">
	539	+ Create account
	540	+ </a>
	541	+ </li>
	542	+ <li
	543	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	544	+ >
	545	+ <a class="w-full" href="./forgot-password.html">
	546	+ Forgot password
	547	+ </a>
	548	+ </li>
	549	+ <li
	550	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	551	+ >
	552	+ <a class="w-full" href="./404.html">404</a>
	553	+ </li>
	554	+ <li
	555	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	556	+ >
	557	+ <a class="w-full" href="pages/blank.html">Blank</a>
	558	+ </li>
	559	+ </ul>
	560	+ </template>
	561	+ </li>
	562	+ </ul>
	563	+ <div class="px-6 my-6">
	564	+ <button
	565	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	566	+ >
	567	+ Create account
	568	+ <span class="ml-2" aria-hidden="true">+</span>
	569	+ </button>
	570	+ </div>
	571	+ </div>
	572	+ </aside>
	573	+ <div class="flex flex-col flex-1">
	574	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	575	+ <div
	576	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	577	+ >
	578	+ <!-- Mobile hamburger -->
	579	+ <button
	580	+ class="p-1 -ml-1 mr-5 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	581	+ @click="toggleSideMenu"
	582	+ aria-label="Menu"
	583	+ >
	584	+ <svg
	585	+ class="w-6 h-6"
	586	+ aria-hidden="true"
	587	+ fill="currentColor"
	588	+ viewBox="0 0 20 20"
	589	+ >
	590	+ <path
	591	+ fill-rule="evenodd"
	592	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	593	+ clip-rule="evenodd"
	594	+ ></path>
	595	+ </svg>
	596	+ </button>
	597	+ <!-- Search input -->
	598	+ <div class="flex justify-center flex-1 lg:mr-32">
	599	+ <div
	600	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	601	+ >
	602	+ <div class="absolute inset-y-0 flex items-center pl-2">
	603	+ <svg
	604	+ class="w-4 h-4"
	605	+ aria-hidden="true"
	606	+ fill="currentColor"
	607	+ viewBox="0 0 20 20"
	608	+ >
	609	+ <path
	610	+ fill-rule="evenodd"
	611	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	612	+ clip-rule="evenodd"
	613	+ ></path>
	614	+ </svg>
	615	+ </div>
	616	+ <input
	617	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	618	+ type="text"
	619	+ placeholder="Search for projects"
	620	+ aria-label="Search"
	621	+ />
	622	+ </div>
	623	+ </div>
	624	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	625	+ <!-- Theme toggler -->
	626	+ <li class="flex">
	627	+ <button
	628	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	629	+ @click="toggleTheme"
	630	+ aria-label="Toggle color mode"
	631	+ >
	632	+ <template x-if="!dark">
	633	+ <svg
	634	+ class="w-5 h-5"
	635	+ aria-hidden="true"
	636	+ fill="currentColor"
	637	+ viewBox="0 0 20 20"
	638	+ >
	639	+ <path
	640	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	641	+ ></path>
	642	+ </svg>
	643	+ </template>
	644	+ <template x-if="dark">
	645	+ <svg
	646	+ class="w-5 h-5"
	647	+ aria-hidden="true"
	648	+ fill="currentColor"
	649	+ viewBox="0 0 20 20"
	650	+ >
	651	+ <path
	652	+ fill-rule="evenodd"
	653	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	654	+ clip-rule="evenodd"
	655	+ ></path>
	656	+ </svg>
	657	+ </template>
	658	+ </button>
	659	+ </li>
	660	+ <!-- Notifications menu -->
	661	+ <li class="relative">
	662	+ <button
	663	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	664	+ @click="toggleNotificationsMenu"
	665	+ @keydown.escape="closeNotificationsMenu"
	666	+ aria-label="Notifications"
	667	+ aria-haspopup="true"
	668	+ >
	669	+ <svg
	670	+ class="w-5 h-5"
	671	+ aria-hidden="true"
	672	+ fill="currentColor"
	673	+ viewBox="0 0 20 20"
	674	+ >
	675	+ <path
	676	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	677	+ ></path>
	678	+ </svg>
	679	+ <!-- Notification badge -->
	680	+ <span
	681	+ aria-hidden="true"
	682	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	683	+ ></span>
	684	+ </button>
	685	+ <template x-if="isNotificationsMenuOpen">
	686	+ <ul
	687	+ x-transition:leave="transition ease-in duration-150"
	688	+ x-transition:leave-start="opacity-100"
	689	+ x-transition:leave-end="opacity-0"
	690	+ @click.away="closeNotificationsMenu"
	691	+ @keydown.escape="closeNotificationsMenu"
	692	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	693	+ aria-label="submenu"
	694	+ >
	695	+ <li class="flex">
	696	+ <a
	697	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	698	+ href="#"
	699	+ >
	700	+ <span>Messages</span>
	701	+ <span
	702	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	703	+ >
	704	+ 13
	705	+ </span>
	706	+ </a>
	707	+ </li>
	708	+ <li class="flex">
	709	+ <a
	710	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	711	+ href="#"
	712	+ >
	713	+ <span>Sales</span>
	714	+ <span
	715	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	716	+ >
	717	+ 2
	718	+ </span>
	719	+ </a>
	720	+ </li>
	721	+ <li class="flex">
	722	+ <a
	723	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	724	+ href="#"
	725	+ >
	726	+ <span>Alerts</span>
	727	+ </a>
	728	+ </li>
	729	+ </ul>
	730	+ </template>
	731	+ </li>
	732	+ <!-- Profile menu -->
	733	+ <li class="relative">
	734	+ <button
	735	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	736	+ @click="toggleProfileMenu"
	737	+ @keydown.escape="closeProfileMenu"
	738	+ aria-label="Account"
	739	+ aria-haspopup="true"
	740	+ >
	741	+ <img
	742	+ class="object-cover w-8 h-8 rounded-full"
	743	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	744	+ alt=""
	745	+ aria-hidden="true"
	746	+ />
	747	+ </button>
	748	+ <template x-if="isProfileMenuOpen">
	749	+ <ul
	750	+ x-transition:leave="transition ease-in duration-150"
	751	+ x-transition:leave-start="opacity-100"
	752	+ x-transition:leave-end="opacity-0"
	753	+ @click.away="closeProfileMenu"
	754	+ @keydown.escape="closeProfileMenu"
	755	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	756	+ aria-label="submenu"
	757	+ >
	758	+ <li class="flex">
	759	+ <a
	760	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	761	+ href="#"
	762	+ >
	763	+ <svg
	764	+ class="w-4 h-4 mr-3"
	765	+ aria-hidden="true"
	766	+ fill="none"
	767	+ stroke-linecap="round"
	768	+ stroke-linejoin="round"
	769	+ stroke-width="2"
	770	+ viewBox="0 0 24 24"
	771	+ stroke="currentColor"
	772	+ >
	773	+ <path
	774	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	775	+ ></path>
	776	+ </svg>
	777	+ <span>Profile</span>
	778	+ </a>
	779	+ </li>
	780	+ <li class="flex">
	781	+ <a
	782	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	783	+ href="#"
	784	+ >
	785	+ <svg
	786	+ class="w-4 h-4 mr-3"
	787	+ aria-hidden="true"
	788	+ fill="none"
	789	+ stroke-linecap="round"
	790	+ stroke-linejoin="round"
	791	+ stroke-width="2"
	792	+ viewBox="0 0 24 24"
	793	+ stroke="currentColor"
	794	+ >
	795	+ <path
	796	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	797	+ ></path>
	798	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	799	+ </svg>
	800	+ <span>Settings</span>
	801	+ </a>
	802	+ </li>
	803	+ <li class="flex">
	804	+ <a
	805	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	806	+ href="#"
	807	+ >
	808	+ <svg
	809	+ class="w-4 h-4 mr-3"
	810	+ aria-hidden="true"
	811	+ fill="none"
	812	+ stroke-linecap="round"
	813	+ stroke-linejoin="round"
	814	+ stroke-width="2"
	815	+ viewBox="0 0 24 24"
	816	+ stroke="currentColor"
	817	+ >
	818	+ <path
	819	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	820	+ ></path>
	821	+ </svg>
	822	+ <span>Log out</span>
	823	+ </a>
	824	+ </li>
	825	+ </ul>
	826	+ </template>
	827	+ </li>
	828	+ </ul>
	829	+ </div>
	830	+ </header>
	831	+ <main class="h-full pb-16 overflow-y-auto">
	832	+ <div class="container flex flex-col items-center px-6 mx-auto">
	833	+ <svg
	834	+ class="w-12 h-12 mt-8 text-purple-200"
	835	+ fill="currentColor"
	836	+ viewBox="0 0 20 20"
	837	+ >
	838	+ <path
	839	+ fill-rule="evenodd"
	840	+ d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z"
	841	+ clip-rule="evenodd"
	842	+ ></path>
	843	+ </svg>
	844	+ <h1 class="text-6xl font-semibold text-gray-700 dark:text-gray-200">
	845	+ 404
	846	+ </h1>
	847	+ <p class="text-gray-700 dark:text-gray-300">
	848	+ Page not found. Check the address or
	849	+ <a
	850	+ class="text-purple-600 hover:underline dark:text-purple-300"
	851	+ href="../index.html"
	852	+ >
	853	+ go back
	854	+ </a>
	855	+ .
	856	+ </p>
	857	+ </div>
	858	+ </main>
	859	+ </div>
	860	+ </div>
	861	+ </body>
	862	+</html>

html/public/pages/blank.html

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,844 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Blank - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="../assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="../assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div
	20	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	21	+ :class="{ 'overflow-hidden': isSideMenuOpen}"
	22	+ >
	23	+ <!-- Desktop sidebar -->
	24	+ <aside
	25	+ class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0"
	26	+ >
	27	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	28	+ <a
	29	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	30	+ href="#"
	31	+ >
	32	+ Windmill
	33	+ </a>
	34	+ <ul class="mt-6">
	35	+ <li class="relative px-6 py-3">
	36	+ <!-- Active items have the snippet below -->
	37	+ <!-- <span
	38	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	39	+ aria-hidden="true"
	40	+ ></span> -->
	41	+
	42	+ <!-- Add this classes to an active anchor (a tag) -->
	43	+ <!-- text-gray-800 dark:text-gray-100 -->
	44	+ <a
	45	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	46	+ href="../index.html"
	47	+ >
	48	+ <svg
	49	+ class="w-5 h-5"
	50	+ aria-hidden="true"
	51	+ fill="none"
	52	+ stroke-linecap="round"
	53	+ stroke-linejoin="round"
	54	+ stroke-width="2"
	55	+ viewBox="0 0 24 24"
	56	+ stroke="currentColor"
	57	+ >
	58	+ <path
	59	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	60	+ ></path>
	61	+ </svg>
	62	+ <span class="ml-4">Dashboard</span>
	63	+ </a>
	64	+ </li>
	65	+ </ul>
	66	+ <ul>
	67	+ <li class="relative px-6 py-3">
	68	+ <a
	69	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	70	+ href="../forms.html"
	71	+ >
	72	+ <svg
	73	+ class="w-5 h-5"
	74	+ aria-hidden="true"
	75	+ fill="none"
	76	+ stroke-linecap="round"
	77	+ stroke-linejoin="round"
	78	+ stroke-width="2"
	79	+ viewBox="0 0 24 24"
	80	+ stroke="currentColor"
	81	+ >
	82	+ <path
	83	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	84	+ ></path>
	85	+ </svg>
	86	+ <span class="ml-4">Forms</span>
	87	+ </a>
	88	+ </li>
	89	+ <li class="relative px-6 py-3">
	90	+ <a
	91	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	92	+ href="../cards.html"
	93	+ >
	94	+ <svg
	95	+ class="w-5 h-5"
	96	+ aria-hidden="true"
	97	+ fill="none"
	98	+ stroke-linecap="round"
	99	+ stroke-linejoin="round"
	100	+ stroke-width="2"
	101	+ viewBox="0 0 24 24"
	102	+ stroke="currentColor"
	103	+ >
	104	+ <path
	105	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	106	+ ></path>
	107	+ </svg>
	108	+ <span class="ml-4">Cards</span>
	109	+ </a>
	110	+ </li>
	111	+ <li class="relative px-6 py-3">
	112	+ <a
	113	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	114	+ href="../charts.html"
	115	+ >
	116	+ <svg
	117	+ class="w-5 h-5"
	118	+ aria-hidden="true"
	119	+ fill="none"
	120	+ stroke-linecap="round"
	121	+ stroke-linejoin="round"
	122	+ stroke-width="2"
	123	+ viewBox="0 0 24 24"
	124	+ stroke="currentColor"
	125	+ >
	126	+ <path
	127	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	128	+ ></path>
	129	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	130	+ </svg>
	131	+ <span class="ml-4">Charts</span>
	132	+ </a>
	133	+ </li>
	134	+ <li class="relative px-6 py-3">
	135	+ <a
	136	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	137	+ href="../buttons.html"
	138	+ >
	139	+ <svg
	140	+ class="w-5 h-5"
	141	+ aria-hidden="true"
	142	+ fill="none"
	143	+ stroke-linecap="round"
	144	+ stroke-linejoin="round"
	145	+ stroke-width="2"
	146	+ viewBox="0 0 24 24"
	147	+ stroke="currentColor"
	148	+ >
	149	+ <path
	150	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	151	+ ></path>
	152	+ </svg>
	153	+ <span class="ml-4">Buttons</span>
	154	+ </a>
	155	+ </li>
	156	+ <li class="relative px-6 py-3">
	157	+ <a
	158	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	159	+ href="../modals.html"
	160	+ >
	161	+ <svg
	162	+ class="w-5 h-5"
	163	+ aria-hidden="true"
	164	+ fill="none"
	165	+ stroke-linecap="round"
	166	+ stroke-linejoin="round"
	167	+ stroke-width="2"
	168	+ viewBox="0 0 24 24"
	169	+ stroke="currentColor"
	170	+ >
	171	+ <path
	172	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	173	+ ></path>
	174	+ </svg>
	175	+ <span class="ml-4">Modals</span>
	176	+ </a>
	177	+ </li>
	178	+ <li class="relative px-6 py-3">
	179	+ <a
	180	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	181	+ href="../tables.html"
	182	+ >
	183	+ <svg
	184	+ class="w-5 h-5"
	185	+ aria-hidden="true"
	186	+ fill="none"
	187	+ stroke-linecap="round"
	188	+ stroke-linejoin="round"
	189	+ stroke-width="2"
	190	+ viewBox="0 0 24 24"
	191	+ stroke="currentColor"
	192	+ >
	193	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	194	+ </svg>
	195	+ <span class="ml-4">Tables</span>
	196	+ </a>
	197	+ </li>
	198	+ <li class="relative px-6 py-3">
	199	+ <button
	200	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	201	+ @click="togglePagesMenu"
	202	+ aria-haspopup="true"
	203	+ >
	204	+ <span class="inline-flex items-center">
	205	+ <svg
	206	+ class="w-5 h-5"
	207	+ aria-hidden="true"
	208	+ fill="none"
	209	+ stroke-linecap="round"
	210	+ stroke-linejoin="round"
	211	+ stroke-width="2"
	212	+ viewBox="0 0 24 24"
	213	+ stroke="currentColor"
	214	+ >
	215	+ <path
	216	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	217	+ ></path>
	218	+ </svg>
	219	+ <span class="ml-4">Pages</span>
	220	+ </span>
	221	+ <svg
	222	+ class="w-4 h-4"
	223	+ aria-hidden="true"
	224	+ fill="currentColor"
	225	+ viewBox="0 0 20 20"
	226	+ >
	227	+ <path
	228	+ fill-rule="evenodd"
	229	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	230	+ clip-rule="evenodd"
	231	+ ></path>
	232	+ </svg>
	233	+ </button>
	234	+ <template x-if="isPagesMenuOpen">
	235	+ <ul
	236	+ x-transition:enter="transition-all ease-in-out duration-300"
	237	+ x-transition:enter-start="opacity-25 max-h-0"
	238	+ x-transition:enter-end="opacity-100 max-h-xl"
	239	+ x-transition:leave="transition-all ease-in-out duration-300"
	240	+ x-transition:leave-start="opacity-100 max-h-xl"
	241	+ x-transition:leave-end="opacity-0 max-h-0"
	242	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	243	+ aria-label="submenu"
	244	+ >
	245	+ <li
	246	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	247	+ >
	248	+ <a class="w-full" href="./login.html">Login</a>
	249	+ </li>
	250	+ <li
	251	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	252	+ >
	253	+ <a class="w-full" href="./create-account.html">
	254	+ Create account
	255	+ </a>
	256	+ </li>
	257	+ <li
	258	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	259	+ >
	260	+ <a class="w-full" href="./forgot-password.html">
	261	+ Forgot password
	262	+ </a>
	263	+ </li>
	264	+ <li
	265	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	266	+ >
	267	+ <a class="w-full" href="./404.html">404</a>
	268	+ </li>
	269	+ <li
	270	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	271	+ >
	272	+ <a class="w-full" href="./blank.html">Blank</a>
	273	+ </li>
	274	+ </ul>
	275	+ </template>
	276	+ </li>
	277	+ </ul>
	278	+ <div class="px-6 my-6">
	279	+ <button
	280	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	281	+ >
	282	+ Create account
	283	+ <span class="ml-2" aria-hidden="true">+</span>
	284	+ </button>
	285	+ </div>
	286	+ </div>
	287	+ </aside>
	288	+ <!-- Mobile sidebar -->
	289	+ <!-- Backdrop -->
	290	+ <div
	291	+ x-show="isSideMenuOpen"
	292	+ x-transition:enter="transition ease-in-out duration-150"
	293	+ x-transition:enter-start="opacity-0"
	294	+ x-transition:enter-end="opacity-100"
	295	+ x-transition:leave="transition ease-in-out duration-150"
	296	+ x-transition:leave-start="opacity-100"
	297	+ x-transition:leave-end="opacity-0"
	298	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	299	+ ></div>
	300	+ <aside
	301	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	302	+ x-show="isSideMenuOpen"
	303	+ x-transition:enter="transition ease-in-out duration-150"
	304	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	305	+ x-transition:enter-end="opacity-100"
	306	+ x-transition:leave="transition ease-in-out duration-150"
	307	+ x-transition:leave-start="opacity-100"
	308	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	309	+ @click.away="closeSideMenu"
	310	+ @keydown.escape="closeSideMenu"
	311	+ >
	312	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	313	+ <a
	314	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	315	+ href="#"
	316	+ >
	317	+ Windmill
	318	+ </a>
	319	+ <ul class="mt-6">
	320	+ <li class="relative px-6 py-3">
	321	+ <!-- Active items have the snippet below -->
	322	+ <!-- <span
	323	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	324	+ aria-hidden="true"
	325	+ ></span> -->
	326	+
	327	+ <!-- Add this classes to an active anchor (a tag) -->
	328	+ <!-- text-gray-800 dark:text-gray-100 -->
	329	+ <a
	330	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	331	+ href="../index.html"
	332	+ >
	333	+ <svg
	334	+ class="w-5 h-5"
	335	+ aria-hidden="true"
	336	+ fill="none"
	337	+ stroke-linecap="round"
	338	+ stroke-linejoin="round"
	339	+ stroke-width="2"
	340	+ viewBox="0 0 24 24"
	341	+ stroke="currentColor"
	342	+ >
	343	+ <path
	344	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	345	+ ></path>
	346	+ </svg>
	347	+ <span class="ml-4">Dashboard</span>
	348	+ </a>
	349	+ </li>
	350	+ </ul>
	351	+ <ul>
	352	+ <li class="relative px-6 py-3">
	353	+ <a
	354	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	355	+ href="../forms.html"
	356	+ >
	357	+ <svg
	358	+ class="w-5 h-5"
	359	+ aria-hidden="true"
	360	+ fill="none"
	361	+ stroke-linecap="round"
	362	+ stroke-linejoin="round"
	363	+ stroke-width="2"
	364	+ viewBox="0 0 24 24"
	365	+ stroke="currentColor"
	366	+ >
	367	+ <path
	368	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	369	+ ></path>
	370	+ </svg>
	371	+ <span class="ml-4">Forms</span>
	372	+ </a>
	373	+ </li>
	374	+ <li class="relative px-6 py-3">
	375	+ <a
	376	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	377	+ href="../cards.html"
	378	+ >
	379	+ <svg
	380	+ class="w-5 h-5"
	381	+ aria-hidden="true"
	382	+ fill="none"
	383	+ stroke-linecap="round"
	384	+ stroke-linejoin="round"
	385	+ stroke-width="2"
	386	+ viewBox="0 0 24 24"
	387	+ stroke="currentColor"
	388	+ >
	389	+ <path
	390	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	391	+ ></path>
	392	+ </svg>
	393	+ <span class="ml-4">Cards</span>
	394	+ </a>
	395	+ </li>
	396	+ <li class="relative px-6 py-3">
	397	+ <a
	398	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	399	+ href="../charts.html"
	400	+ >
	401	+ <svg
	402	+ class="w-5 h-5"
	403	+ aria-hidden="true"
	404	+ fill="none"
	405	+ stroke-linecap="round"
	406	+ stroke-linejoin="round"
	407	+ stroke-width="2"
	408	+ viewBox="0 0 24 24"
	409	+ stroke="currentColor"
	410	+ >
	411	+ <path
	412	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	413	+ ></path>
	414	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	415	+ </svg>
	416	+ <span class="ml-4">Charts</span>
	417	+ </a>
	418	+ </li>
	419	+ <li class="relative px-6 py-3">
	420	+ <a
	421	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	422	+ href="../buttons.html"
	423	+ >
	424	+ <svg
	425	+ class="w-5 h-5"
	426	+ aria-hidden="true"
	427	+ fill="none"
	428	+ stroke-linecap="round"
	429	+ stroke-linejoin="round"
	430	+ stroke-width="2"
	431	+ viewBox="0 0 24 24"
	432	+ stroke="currentColor"
	433	+ >
	434	+ <path
	435	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	436	+ ></path>
	437	+ </svg>
	438	+ <span class="ml-4">Buttons</span>
	439	+ </a>
	440	+ </li>
	441	+ <li class="relative px-6 py-3">
	442	+ <a
	443	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	444	+ href="../modals.html"
	445	+ >
	446	+ <svg
	447	+ class="w-5 h-5"
	448	+ aria-hidden="true"
	449	+ fill="none"
	450	+ stroke-linecap="round"
	451	+ stroke-linejoin="round"
	452	+ stroke-width="2"
	453	+ viewBox="0 0 24 24"
	454	+ stroke="currentColor"
	455	+ >
	456	+ <path
	457	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	458	+ ></path>
	459	+ </svg>
	460	+ <span class="ml-4">Modals</span>
	461	+ </a>
	462	+ </li>
	463	+ <li class="relative px-6 py-3">
	464	+ <a
	465	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	466	+ href="../tables.html"
	467	+ >
	468	+ <svg
	469	+ class="w-5 h-5"
	470	+ aria-hidden="true"
	471	+ fill="none"
	472	+ stroke-linecap="round"
	473	+ stroke-linejoin="round"
	474	+ stroke-width="2"
	475	+ viewBox="0 0 24 24"
	476	+ stroke="currentColor"
	477	+ >
	478	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	479	+ </svg>
	480	+ <span class="ml-4">Tables</span>
	481	+ </a>
	482	+ </li>
	483	+ <li class="relative px-6 py-3">
	484	+ <button
	485	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	486	+ @click="togglePagesMenu"
	487	+ aria-haspopup="true"
	488	+ >
	489	+ <span class="inline-flex items-center">
	490	+ <svg
	491	+ class="w-5 h-5"
	492	+ aria-hidden="true"
	493	+ fill="none"
	494	+ stroke-linecap="round"
	495	+ stroke-linejoin="round"
	496	+ stroke-width="2"
	497	+ viewBox="0 0 24 24"
	498	+ stroke="currentColor"
	499	+ >
	500	+ <path
	501	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	502	+ ></path>
	503	+ </svg>
	504	+ <span class="ml-4">Pages</span>
	505	+ </span>
	506	+ <svg
	507	+ class="w-4 h-4"
	508	+ aria-hidden="true"
	509	+ fill="currentColor"
	510	+ viewBox="0 0 20 20"
	511	+ >
	512	+ <path
	513	+ fill-rule="evenodd"
	514	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	515	+ clip-rule="evenodd"
	516	+ ></path>
	517	+ </svg>
	518	+ </button>
	519	+ <template x-if="isPagesMenuOpen">
	520	+ <ul
	521	+ x-transition:enter="transition-all ease-in-out duration-300"
	522	+ x-transition:enter-start="opacity-25 max-h-0"
	523	+ x-transition:enter-end="opacity-100 max-h-xl"
	524	+ x-transition:leave="transition-all ease-in-out duration-300"
	525	+ x-transition:leave-start="opacity-100 max-h-xl"
	526	+ x-transition:leave-end="opacity-0 max-h-0"
	527	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	528	+ aria-label="submenu"
	529	+ >
	530	+ <li
	531	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	532	+ >
	533	+ <a class="w-full" href="./login.html">Login</a>
	534	+ </li>
	535	+ <li
	536	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	537	+ >
	538	+ <a class="w-full" href="./create-account.html">
	539	+ Create account
	540	+ </a>
	541	+ </li>
	542	+ <li
	543	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	544	+ >
	545	+ <a class="w-full" href="./forgot-password.html">
	546	+ Forgot password
	547	+ </a>
	548	+ </li>
	549	+ <li
	550	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	551	+ >
	552	+ <a class="w-full" href="./404.html">404</a>
	553	+ </li>
	554	+ <li
	555	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	556	+ >
	557	+ <a class="w-full" href="./blank.html">Blank</a>
	558	+ </li>
	559	+ </ul>
	560	+ </template>
	561	+ </li>
	562	+ </ul>
	563	+ <div class="px-6 my-6">
	564	+ <button
	565	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	566	+ >
	567	+ Create account
	568	+ <span class="ml-2" aria-hidden="true">+</span>
	569	+ </button>
	570	+ </div>
	571	+ </div>
	572	+ </aside>
	573	+ <div class="flex flex-col flex-1">
	574	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	575	+ <div
	576	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	577	+ >
	578	+ <!-- Mobile hamburger -->
	579	+ <button
	580	+ class="p-1 -ml-1 mr-5 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	581	+ @click="toggleSideMenu"
	582	+ aria-label="Menu"
	583	+ >
	584	+ <svg
	585	+ class="w-6 h-6"
	586	+ aria-hidden="true"
	587	+ fill="currentColor"
	588	+ viewBox="0 0 20 20"
	589	+ >
	590	+ <path
	591	+ fill-rule="evenodd"
	592	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	593	+ clip-rule="evenodd"
	594	+ ></path>
	595	+ </svg>
	596	+ </button>
	597	+ <!-- Search input -->
	598	+ <div class="flex justify-center flex-1 lg:mr-32">
	599	+ <div
	600	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	601	+ >
	602	+ <div class="absolute inset-y-0 flex items-center pl-2">
	603	+ <svg
	604	+ class="w-4 h-4"
	605	+ aria-hidden="true"
	606	+ fill="currentColor"
	607	+ viewBox="0 0 20 20"
	608	+ >
	609	+ <path
	610	+ fill-rule="evenodd"
	611	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	612	+ clip-rule="evenodd"
	613	+ ></path>
	614	+ </svg>
	615	+ </div>
	616	+ <input
	617	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	618	+ type="text"
	619	+ placeholder="Search for projects"
	620	+ aria-label="Search"
	621	+ />
	622	+ </div>
	623	+ </div>
	624	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	625	+ <!-- Theme toggler -->
	626	+ <li class="flex">
	627	+ <button
	628	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	629	+ @click="toggleTheme"
	630	+ aria-label="Toggle color mode"
	631	+ >
	632	+ <template x-if="!dark">
	633	+ <svg
	634	+ class="w-5 h-5"
	635	+ aria-hidden="true"
	636	+ fill="currentColor"
	637	+ viewBox="0 0 20 20"
	638	+ >
	639	+ <path
	640	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	641	+ ></path>
	642	+ </svg>
	643	+ </template>
	644	+ <template x-if="dark">
	645	+ <svg
	646	+ class="w-5 h-5"
	647	+ aria-hidden="true"
	648	+ fill="currentColor"
	649	+ viewBox="0 0 20 20"
	650	+ >
	651	+ <path
	652	+ fill-rule="evenodd"
	653	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	654	+ clip-rule="evenodd"
	655	+ ></path>
	656	+ </svg>
	657	+ </template>
	658	+ </button>
	659	+ </li>
	660	+ <!-- Notifications menu -->
	661	+ <li class="relative">
	662	+ <button
	663	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	664	+ @click="toggleNotificationsMenu"
	665	+ @keydown.escape="closeNotificationsMenu"
	666	+ aria-label="Notifications"
	667	+ aria-haspopup="true"
	668	+ >
	669	+ <svg
	670	+ class="w-5 h-5"
	671	+ aria-hidden="true"
	672	+ fill="currentColor"
	673	+ viewBox="0 0 20 20"
	674	+ >
	675	+ <path
	676	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	677	+ ></path>
	678	+ </svg>
	679	+ <!-- Notification badge -->
	680	+ <span
	681	+ aria-hidden="true"
	682	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	683	+ ></span>
	684	+ </button>
	685	+ <template x-if="isNotificationsMenuOpen">
	686	+ <ul
	687	+ x-transition:leave="transition ease-in duration-150"
	688	+ x-transition:leave-start="opacity-100"
	689	+ x-transition:leave-end="opacity-0"
	690	+ @click.away="closeNotificationsMenu"
	691	+ @keydown.escape="closeNotificationsMenu"
	692	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	693	+ aria-label="submenu"
	694	+ >
	695	+ <li class="flex">
	696	+ <a
	697	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	698	+ href="#"
	699	+ >
	700	+ <span>Messages</span>
	701	+ <span
	702	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	703	+ >
	704	+ 13
	705	+ </span>
	706	+ </a>
	707	+ </li>
	708	+ <li class="flex">
	709	+ <a
	710	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	711	+ href="#"
	712	+ >
	713	+ <span>Sales</span>
	714	+ <span
	715	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	716	+ >
	717	+ 2
	718	+ </span>
	719	+ </a>
	720	+ </li>
	721	+ <li class="flex">
	722	+ <a
	723	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	724	+ href="#"
	725	+ >
	726	+ <span>Alerts</span>
	727	+ </a>
	728	+ </li>
	729	+ </ul>
	730	+ </template>
	731	+ </li>
	732	+ <!-- Profile menu -->
	733	+ <li class="relative">
	734	+ <button
	735	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	736	+ @click="toggleProfileMenu"
	737	+ @keydown.escape="closeProfileMenu"
	738	+ aria-label="Account"
	739	+ aria-haspopup="true"
	740	+ >
	741	+ <img
	742	+ class="object-cover w-8 h-8 rounded-full"
	743	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	744	+ alt=""
	745	+ aria-hidden="true"
	746	+ />
	747	+ </button>
	748	+ <template x-if="isProfileMenuOpen">
	749	+ <ul
	750	+ x-transition:leave="transition ease-in duration-150"
	751	+ x-transition:leave-start="opacity-100"
	752	+ x-transition:leave-end="opacity-0"
	753	+ @click.away="closeProfileMenu"
	754	+ @keydown.escape="closeProfileMenu"
	755	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	756	+ aria-label="submenu"
	757	+ >
	758	+ <li class="flex">
	759	+ <a
	760	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	761	+ href="#"
	762	+ >
	763	+ <svg
	764	+ class="w-4 h-4 mr-3"
	765	+ aria-hidden="true"
	766	+ fill="none"
	767	+ stroke-linecap="round"
	768	+ stroke-linejoin="round"
	769	+ stroke-width="2"
	770	+ viewBox="0 0 24 24"
	771	+ stroke="currentColor"
	772	+ >
	773	+ <path
	774	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	775	+ ></path>
	776	+ </svg>
	777	+ <span>Profile</span>
	778	+ </a>
	779	+ </li>
	780	+ <li class="flex">
	781	+ <a
	782	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	783	+ href="#"
	784	+ >
	785	+ <svg
	786	+ class="w-4 h-4 mr-3"
	787	+ aria-hidden="true"
	788	+ fill="none"
	789	+ stroke-linecap="round"
	790	+ stroke-linejoin="round"
	791	+ stroke-width="2"
	792	+ viewBox="0 0 24 24"
	793	+ stroke="currentColor"
	794	+ >
	795	+ <path
	796	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	797	+ ></path>
	798	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	799	+ </svg>
	800	+ <span>Settings</span>
	801	+ </a>
	802	+ </li>
	803	+ <li class="flex">
	804	+ <a
	805	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	806	+ href="#"
	807	+ >
	808	+ <svg
	809	+ class="w-4 h-4 mr-3"
	810	+ aria-hidden="true"
	811	+ fill="none"
	812	+ stroke-linecap="round"
	813	+ stroke-linejoin="round"
	814	+ stroke-width="2"
	815	+ viewBox="0 0 24 24"
	816	+ stroke="currentColor"
	817	+ >
	818	+ <path
	819	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	820	+ ></path>
	821	+ </svg>
	822	+ <span>Log out</span>
	823	+ </a>
	824	+ </li>
	825	+ </ul>
	826	+ </template>
	827	+ </li>
	828	+ </ul>
	829	+ </div>
	830	+ </header>
	831	+ <main class="h-full pb-16 overflow-y-auto">
	832	+ <!-- Remove everything INSIDE this div to a really blank page -->
	833	+ <div class="container px-6 mx-auto grid">
	834	+ <h2
	835	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	836	+ >
	837	+ Blank
	838	+ </h2>
	839	+ </div>
	840	+ </main>
	841	+ </div>
	842	+ </div>
	843	+ </body>
	844	+</html>

html/public/pages/create-account.html

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,139 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Create account - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="../assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="../assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900">
	20	+ <div
	21	+ class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800"
	22	+ >
	23	+ <div class="flex flex-col overflow-y-auto md:flex-row">
	24	+ <div class="h-32 md:h-auto md:w-1/2">
	25	+ <img
	26	+ aria-hidden="true"
	27	+ class="object-cover w-full h-full dark:hidden"
	28	+ src="../assets/img/create-account-office.jpeg"
	29	+ alt="Office"
	30	+ />
	31	+ <img
	32	+ aria-hidden="true"
	33	+ class="hidden object-cover w-full h-full dark:block"
	34	+ src="../assets/img/create-account-office-dark.jpeg"
	35	+ alt="Office"
	36	+ />
	37	+ </div>
	38	+ <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
	39	+ <div class="w-full">
	40	+ <h1
	41	+ class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200"
	42	+ >
	43	+ Create account
	44	+ </h1>
	45	+ <label class="block text-sm">
	46	+ <span class="text-gray-700 dark:text-gray-400">Email</span>
	47	+ <input
	48	+ class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
	49	+ placeholder="Jane Doe"
	50	+ />
	51	+ </label>
	52	+ <label class="block mt-4 text-sm">
	53	+ <span class="text-gray-700 dark:text-gray-400">Password</span>
	54	+ <input
	55	+ class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
	56	+ placeholder="***************"
	57	+ type="password"
	58	+ />
	59	+ </label>
	60	+ <label class="block mt-4 text-sm">
	61	+ <span class="text-gray-700 dark:text-gray-400">
	62	+ Confirm password
	63	+ </span>
	64	+ <input
	65	+ class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
	66	+ placeholder="***************"
	67	+ type="password"
	68	+ />
	69	+ </label>
	70	+
	71	+ <div class="flex mt-6 text-sm">
	72	+ <label class="flex items-center dark:text-gray-400">
	73	+ <input
	74	+ type="checkbox"
	75	+ class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	76	+ />
	77	+ <span class="ml-2">
	78	+ I agree to the
	79	+ <span class="underline">privacy policy</span>
	80	+ </span>
	81	+ </label>
	82	+ </div>
	83	+
	84	+ <!-- You should use a button here, as the anchor is only used for the example -->
	85	+ <a
	86	+ class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	87	+ href="./login.html"
	88	+ >
	89	+ Create account
	90	+ </a>
	91	+
	92	+ <hr class="my-8" />
	93	+
	94	+ <button
	95	+ class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
	96	+ >
	97	+ <svg
	98	+ class="w-4 h-4 mr-2"
	99	+ aria-hidden="true"
	100	+ viewBox="0 0 24 24"
	101	+ fill="currentColor"
	102	+ >
	103	+ <path
	104	+ d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
	105	+ />
	106	+ </svg>
	107	+ Github
	108	+ </button>
	109	+ <button
	110	+ class="flex items-center justify-center w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
	111	+ >
	112	+ <svg
	113	+ class="w-4 h-4 mr-2"
	114	+ aria-hidden="true"
	115	+ viewBox="0 0 24 24"
	116	+ fill="currentColor"
	117	+ >
	118	+ <path
	119	+ d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"
	120	+ />
	121	+ </svg>
	122	+ Twitter
	123	+ </button>
	124	+
	125	+ <p class="mt-4">
	126	+ <a
	127	+ class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline"
	128	+ href="./login.html"
	129	+ >
	130	+ Already have an account? Login
	131	+ </a>
	132	+ </p>
	133	+ </div>
	134	+ </div>
	135	+ </div>
	136	+ </div>
	137	+ </div>
	138	+ </body>
	139	+</html>

html/public/pages/forgot-password.html

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,66 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Forgot password - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="../assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="../assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900">
	20	+ <div
	21	+ class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800"
	22	+ >
	23	+ <div class="flex flex-col overflow-y-auto md:flex-row">
	24	+ <div class="h-32 md:h-auto md:w-1/2">
	25	+ <img
	26	+ aria-hidden="true"
	27	+ class="object-cover w-full h-full dark:hidden"
	28	+ src="../assets/img/forgot-password-office.jpeg"
	29	+ alt="Office"
	30	+ />
	31	+ <img
	32	+ aria-hidden="true"
	33	+ class="hidden object-cover w-full h-full dark:block"
	34	+ src="../assets/img/forgot-password-office-dark.jpeg"
	35	+ alt="Office"
	36	+ />
	37	+ </div>
	38	+ <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
	39	+ <div class="w-full">
	40	+ <h1
	41	+ class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200"
	42	+ >
	43	+ Forgot password
	44	+ </h1>
	45	+ <label class="block text-sm">
	46	+ <span class="text-gray-700 dark:text-gray-400">Email</span>
	47	+ <input
	48	+ class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
	49	+ placeholder="Jane Doe"
	50	+ />
	51	+ </label>
	52	+
	53	+ <!-- You should use a button here, as the anchor is only used for the example -->
	54	+ <a
	55	+ class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	56	+ href="./login.html"
	57	+ >
	58	+ Recover password
	59	+ </a>
	60	+ </div>
	61	+ </div>
	62	+ </div>
	63	+ </div>
	64	+ </div>
	65	+ </body>
	66	+</html>

html/public/pages/login.html

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,124 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Login - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="../assets/css/tailwind.output.css" />
	12	+ <!--<script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>-->
	16	+ <script src="../assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900">
	20	+ <div
	21	+ class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800"
	22	+ >
	23	+ <div class="flex flex-col overflow-y-auto md:flex-row">
	24	+ <div class="h-32 md:h-auto md:w-1/2">
	25	+ <img
	26	+ aria-hidden="true"
	27	+ class="object-cover w-full h-full dark:hidden"
	28	+ src="../assets/img/login-office.jpeg"
	29	+ alt="Office"
	30	+ />
	31	+ <img
	32	+ aria-hidden="true"
	33	+ class="hidden object-cover w-full h-full dark:block"
	34	+ src="../assets/img/login-office-dark.jpeg"
	35	+ alt="Office"
	36	+ />
	37	+ </div>
	38	+ <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
	39	+ <div class="w-full">
	40	+ <h1
	41	+ class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200"
	42	+ >
	43	+ Login
	44	+ </h1>
	45	+ <label class="block text-sm">
	46	+ <span class="text-gray-700 dark:text-gray-400">Email</span>
	47	+ <input
	48	+ class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
	49	+ placeholder="Jane Doe"
	50	+ />
	51	+ </label>
	52	+ <label class="block mt-4 text-sm">
	53	+ <span class="text-gray-700 dark:text-gray-400">Password</span>
	54	+ <input
	55	+ class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
	56	+ placeholder="***************"
	57	+ type="password"
	58	+ />
	59	+ </label>
	60	+
	61	+ <!-- You should use a button here, as the anchor is only used for the example -->
	62	+ <a
	63	+ class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	64	+ href="../index.html"
	65	+ >
	66	+ Log in
	67	+ </a>
	68	+
	69	+ <hr class="my-8" />
	70	+
	71	+ <button
	72	+ class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
	73	+ >
	74	+ <svg
	75	+ class="w-4 h-4 mr-2"
	76	+ aria-hidden="true"
	77	+ viewBox="0 0 24 24"
	78	+ fill="currentColor"
	79	+ >
	80	+ <path
	81	+ d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
	82	+ />
	83	+ </svg>
	84	+ Github
	85	+ </button>
	86	+ <button
	87	+ class="flex items-center justify-center w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
	88	+ >
	89	+ <svg
	90	+ class="w-4 h-4 mr-2"
	91	+ aria-hidden="true"
	92	+ viewBox="0 0 24 24"
	93	+ fill="currentColor"
	94	+ >
	95	+ <path
	96	+ d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"
	97	+ />
	98	+ </svg>
	99	+ Twitter
	100	+ </button>
	101	+
	102	+ <p class="mt-4">
	103	+ <a
	104	+ class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline"
	105	+ href="./forgot-password.html"
	106	+ >
	107	+ Forgot your password?
	108	+ </a>
	109	+ </p>
	110	+ <p class="mt-1">
	111	+ <a
	112	+ class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline"
	113	+ href="./create-account.html"
	114	+ >
	115	+ Create account
	116	+ </a>
	117	+ </p>
	118	+ </div>
	119	+ </div>
	120	+ </div>
	121	+ </div>
	122	+ </div>
	123	+ </body>
	124	+</html>

html/public/tables.html

Diff comments   View file @ 5f2a263

Changes suppressed. Click to show

...	...	@@ -0,0 +1,2161 @@
	1	+<!DOCTYPE html>
	2	+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
	3	+ <head>
	4	+ <meta charset="UTF-8" />
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	6	+ <title>Tables - Windmill Dashboard</title>
	7	+ <link
	8	+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
	9	+ rel="stylesheet"
	10	+ />
	11	+ <link rel="stylesheet" href="./assets/css/tailwind.output.css" />
	12	+ <script
	13	+ src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
	14	+ defer
	15	+ ></script>
	16	+ <script src="./assets/js/init-alpine.js"></script>
	17	+ </head>
	18	+ <body>
	19	+ <div
	20	+ class="flex h-screen bg-gray-50 dark:bg-gray-900"
	21	+ :class="{ 'overflow-hidden': isSideMenuOpen}"
	22	+ >
	23	+ <!-- Desktop sidebar -->
	24	+ <aside
	25	+ class="z-20 flex-shrink-0 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block"
	26	+ >
	27	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	28	+ <a
	29	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	30	+ href="#"
	31	+ >
	32	+ Windmill
	33	+ </a>
	34	+ <ul class="mt-6">
	35	+ <li class="relative px-6 py-3">
	36	+ <a
	37	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	38	+ href="index.html"
	39	+ >
	40	+ <svg
	41	+ class="w-5 h-5"
	42	+ aria-hidden="true"
	43	+ fill="none"
	44	+ stroke-linecap="round"
	45	+ stroke-linejoin="round"
	46	+ stroke-width="2"
	47	+ viewBox="0 0 24 24"
	48	+ stroke="currentColor"
	49	+ >
	50	+ <path
	51	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	52	+ ></path>
	53	+ </svg>
	54	+ <span class="ml-4">Dashboard</span>
	55	+ </a>
	56	+ </li>
	57	+ </ul>
	58	+ <ul>
	59	+ <li class="relative px-6 py-3">
	60	+ <a
	61	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	62	+ href="forms.html"
	63	+ >
	64	+ <svg
	65	+ class="w-5 h-5"
	66	+ aria-hidden="true"
	67	+ fill="none"
	68	+ stroke-linecap="round"
	69	+ stroke-linejoin="round"
	70	+ stroke-width="2"
	71	+ viewBox="0 0 24 24"
	72	+ stroke="currentColor"
	73	+ >
	74	+ <path
	75	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	76	+ ></path>
	77	+ </svg>
	78	+ <span class="ml-4">Forms</span>
	79	+ </a>
	80	+ </li>
	81	+ <li class="relative px-6 py-3">
	82	+ <a
	83	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	84	+ href="cards.html"
	85	+ >
	86	+ <svg
	87	+ class="w-5 h-5"
	88	+ aria-hidden="true"
	89	+ fill="none"
	90	+ stroke-linecap="round"
	91	+ stroke-linejoin="round"
	92	+ stroke-width="2"
	93	+ viewBox="0 0 24 24"
	94	+ stroke="currentColor"
	95	+ >
	96	+ <path
	97	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	98	+ ></path>
	99	+ </svg>
	100	+ <span class="ml-4">Cards</span>
	101	+ </a>
	102	+ </li>
	103	+ <li class="relative px-6 py-3">
	104	+ <a
	105	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	106	+ href="charts.html"
	107	+ >
	108	+ <svg
	109	+ class="w-5 h-5"
	110	+ aria-hidden="true"
	111	+ fill="none"
	112	+ stroke-linecap="round"
	113	+ stroke-linejoin="round"
	114	+ stroke-width="2"
	115	+ viewBox="0 0 24 24"
	116	+ stroke="currentColor"
	117	+ >
	118	+ <path
	119	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	120	+ ></path>
	121	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	122	+ </svg>
	123	+ <span class="ml-4">Charts</span>
	124	+ </a>
	125	+ </li>
	126	+ <li class="relative px-6 py-3">
	127	+ <a
	128	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	129	+ href="buttons.html"
	130	+ >
	131	+ <svg
	132	+ class="w-5 h-5"
	133	+ aria-hidden="true"
	134	+ fill="none"
	135	+ stroke-linecap="round"
	136	+ stroke-linejoin="round"
	137	+ stroke-width="2"
	138	+ viewBox="0 0 24 24"
	139	+ stroke="currentColor"
	140	+ >
	141	+ <path
	142	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	143	+ ></path>
	144	+ </svg>
	145	+ <span class="ml-4">Buttons</span>
	146	+ </a>
	147	+ </li>
	148	+ <li class="relative px-6 py-3">
	149	+ <a
	150	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	151	+ href="modals.html"
	152	+ >
	153	+ <svg
	154	+ class="w-5 h-5"
	155	+ aria-hidden="true"
	156	+ fill="none"
	157	+ stroke-linecap="round"
	158	+ stroke-linejoin="round"
	159	+ stroke-width="2"
	160	+ viewBox="0 0 24 24"
	161	+ stroke="currentColor"
	162	+ >
	163	+ <path
	164	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	165	+ ></path>
	166	+ </svg>
	167	+ <span class="ml-4">Modals</span>
	168	+ </a>
	169	+ </li>
	170	+ <li class="relative px-6 py-3">
	171	+ <span
	172	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	173	+ aria-hidden="true"
	174	+ ></span>
	175	+ <a
	176	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	177	+ href="tables.html"
	178	+ >
	179	+ <svg
	180	+ class="w-5 h-5"
	181	+ aria-hidden="true"
	182	+ fill="none"
	183	+ stroke-linecap="round"
	184	+ stroke-linejoin="round"
	185	+ stroke-width="2"
	186	+ viewBox="0 0 24 24"
	187	+ stroke="currentColor"
	188	+ >
	189	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	190	+ </svg>
	191	+ <span class="ml-4">Tables</span>
	192	+ </a>
	193	+ </li>
	194	+ <li class="relative px-6 py-3">
	195	+ <button
	196	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	197	+ @click="togglePagesMenu"
	198	+ aria-haspopup="true"
	199	+ >
	200	+ <span class="inline-flex items-center">
	201	+ <svg
	202	+ class="w-5 h-5"
	203	+ aria-hidden="true"
	204	+ fill="none"
	205	+ stroke-linecap="round"
	206	+ stroke-linejoin="round"
	207	+ stroke-width="2"
	208	+ viewBox="0 0 24 24"
	209	+ stroke="currentColor"
	210	+ >
	211	+ <path
	212	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	213	+ ></path>
	214	+ </svg>
	215	+ <span class="ml-4">Pages</span>
	216	+ </span>
	217	+ <svg
	218	+ class="w-4 h-4"
	219	+ aria-hidden="true"
	220	+ fill="currentColor"
	221	+ viewBox="0 0 20 20"
	222	+ >
	223	+ <path
	224	+ fill-rule="evenodd"
	225	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	226	+ clip-rule="evenodd"
	227	+ ></path>
	228	+ </svg>
	229	+ </button>
	230	+ <template x-if="isPagesMenuOpen">
	231	+ <ul
	232	+ x-transition:enter="transition-all ease-in-out duration-300"
	233	+ x-transition:enter-start="opacity-25 max-h-0"
	234	+ x-transition:enter-end="opacity-100 max-h-xl"
	235	+ x-transition:leave="transition-all ease-in-out duration-300"
	236	+ x-transition:leave-start="opacity-100 max-h-xl"
	237	+ x-transition:leave-end="opacity-0 max-h-0"
	238	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	239	+ aria-label="submenu"
	240	+ >
	241	+ <li
	242	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	243	+ >
	244	+ <a class="w-full" href="pages/login.html">Login</a>
	245	+ </li>
	246	+ <li
	247	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	248	+ >
	249	+ <a class="w-full" href="pages/create-account.html">
	250	+ Create account
	251	+ </a>
	252	+ </li>
	253	+ <li
	254	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	255	+ >
	256	+ <a class="w-full" href="pages/forgot-password.html">
	257	+ Forgot password
	258	+ </a>
	259	+ </li>
	260	+ <li
	261	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	262	+ >
	263	+ <a class="w-full" href="pages/404.html">404</a>
	264	+ </li>
	265	+ <li
	266	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	267	+ >
	268	+ <a class="w-full" href="pages/blank.html">Blank</a>
	269	+ </li>
	270	+ </ul>
	271	+ </template>
	272	+ </li>
	273	+ </ul>
	274	+ <div class="px-6 my-6">
	275	+ <button
	276	+ class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	277	+ >
	278	+ Create account
	279	+ <span class="ml-2" aria-hidden="true">+</span>
	280	+ </button>
	281	+ </div>
	282	+ </div>
	283	+ </aside>
	284	+ <!-- Mobile sidebar -->
	285	+ <!-- Backdrop -->
	286	+ <div
	287	+ x-show="isSideMenuOpen"
	288	+ x-transition:enter="transition ease-in-out duration-150"
	289	+ x-transition:enter-start="opacity-0"
	290	+ x-transition:enter-end="opacity-100"
	291	+ x-transition:leave="transition ease-in-out duration-150"
	292	+ x-transition:leave-start="opacity-100"
	293	+ x-transition:leave-end="opacity-0"
	294	+ class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	295	+ ></div>
	296	+ <aside
	297	+ class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
	298	+ x-show="isSideMenuOpen"
	299	+ x-transition:enter="transition ease-in-out duration-150"
	300	+ x-transition:enter-start="opacity-0 transform -translate-x-20"
	301	+ x-transition:enter-end="opacity-100"
	302	+ x-transition:leave="transition ease-in-out duration-150"
	303	+ x-transition:leave-start="opacity-100"
	304	+ x-transition:leave-end="opacity-0 transform -translate-x-20"
	305	+ @click.away="closeSideMenu"
	306	+ @keydown.escape="closeSideMenu"
	307	+ >
	308	+ <div class="py-4 text-gray-500 dark:text-gray-400">
	309	+ <a
	310	+ class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
	311	+ href="#"
	312	+ >
	313	+ Windmill
	314	+ </a>
	315	+ <ul class="mt-6">
	316	+ <li class="relative px-6 py-3">
	317	+ <a
	318	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	319	+ href="index.html"
	320	+ >
	321	+ <svg
	322	+ class="w-5 h-5"
	323	+ aria-hidden="true"
	324	+ fill="none"
	325	+ stroke-linecap="round"
	326	+ stroke-linejoin="round"
	327	+ stroke-width="2"
	328	+ viewBox="0 0 24 24"
	329	+ stroke="currentColor"
	330	+ >
	331	+ <path
	332	+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
	333	+ ></path>
	334	+ </svg>
	335	+ <span class="ml-4">Dashboard</span>
	336	+ </a>
	337	+ </li>
	338	+ </ul>
	339	+ <ul>
	340	+ <li class="relative px-6 py-3">
	341	+ <a
	342	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	343	+ href="forms.html"
	344	+ >
	345	+ <svg
	346	+ class="w-5 h-5"
	347	+ aria-hidden="true"
	348	+ fill="none"
	349	+ stroke-linecap="round"
	350	+ stroke-linejoin="round"
	351	+ stroke-width="2"
	352	+ viewBox="0 0 24 24"
	353	+ stroke="currentColor"
	354	+ >
	355	+ <path
	356	+ d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
	357	+ ></path>
	358	+ </svg>
	359	+ <span class="ml-4">Forms</span>
	360	+ </a>
	361	+ </li>
	362	+ <li class="relative px-6 py-3">
	363	+ <a
	364	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	365	+ href="cards.html"
	366	+ >
	367	+ <svg
	368	+ class="w-5 h-5"
	369	+ aria-hidden="true"
	370	+ fill="none"
	371	+ stroke-linecap="round"
	372	+ stroke-linejoin="round"
	373	+ stroke-width="2"
	374	+ viewBox="0 0 24 24"
	375	+ stroke="currentColor"
	376	+ >
	377	+ <path
	378	+ d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
	379	+ ></path>
	380	+ </svg>
	381	+ <span class="ml-4">Cards</span>
	382	+ </a>
	383	+ </li>
	384	+ <li class="relative px-6 py-3">
	385	+ <a
	386	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	387	+ href="charts.html"
	388	+ >
	389	+ <svg
	390	+ class="w-5 h-5"
	391	+ aria-hidden="true"
	392	+ fill="none"
	393	+ stroke-linecap="round"
	394	+ stroke-linejoin="round"
	395	+ stroke-width="2"
	396	+ viewBox="0 0 24 24"
	397	+ stroke="currentColor"
	398	+ >
	399	+ <path
	400	+ d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
	401	+ ></path>
	402	+ <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
	403	+ </svg>
	404	+ <span class="ml-4">Charts</span>
	405	+ </a>
	406	+ </li>
	407	+ <li class="relative px-6 py-3">
	408	+ <a
	409	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	410	+ href="buttons.html"
	411	+ >
	412	+ <svg
	413	+ class="w-5 h-5"
	414	+ aria-hidden="true"
	415	+ fill="none"
	416	+ stroke-linecap="round"
	417	+ stroke-linejoin="round"
	418	+ stroke-width="2"
	419	+ viewBox="0 0 24 24"
	420	+ stroke="currentColor"
	421	+ >
	422	+ <path
	423	+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
	424	+ ></path>
	425	+ </svg>
	426	+ <span class="ml-4">Buttons</span>
	427	+ </a>
	428	+ </li>
	429	+ <li class="relative px-6 py-3">
	430	+ <a
	431	+ class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	432	+ href="modals.html"
	433	+ >
	434	+ <svg
	435	+ class="w-5 h-5"
	436	+ aria-hidden="true"
	437	+ fill="none"
	438	+ stroke-linecap="round"
	439	+ stroke-linejoin="round"
	440	+ stroke-width="2"
	441	+ viewBox="0 0 24 24"
	442	+ stroke="currentColor"
	443	+ >
	444	+ <path
	445	+ d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
	446	+ ></path>
	447	+ </svg>
	448	+ <span class="ml-4">Modals</span>
	449	+ </a>
	450	+ </li>
	451	+ <li class="relative px-6 py-3">
	452	+ <span
	453	+ class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
	454	+ aria-hidden="true"
	455	+ ></span>
	456	+ <a
	457	+ class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
	458	+ href="tables.html"
	459	+ >
	460	+ <svg
	461	+ class="w-5 h-5"
	462	+ aria-hidden="true"
	463	+ fill="none"
	464	+ stroke-linecap="round"
	465	+ stroke-linejoin="round"
	466	+ stroke-width="2"
	467	+ viewBox="0 0 24 24"
	468	+ stroke="currentColor"
	469	+ >
	470	+ <path d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
	471	+ </svg>
	472	+ <span class="ml-4">Tables</span>
	473	+ </a>
	474	+ </li>
	475	+ <li class="relative px-6 py-3">
	476	+ <button
	477	+ class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	478	+ @click="togglePagesMenu"
	479	+ aria-haspopup="true"
	480	+ >
	481	+ <span class="inline-flex items-center">
	482	+ <svg
	483	+ class="w-5 h-5"
	484	+ aria-hidden="true"
	485	+ fill="none"
	486	+ stroke-linecap="round"
	487	+ stroke-linejoin="round"
	488	+ stroke-width="2"
	489	+ viewBox="0 0 24 24"
	490	+ stroke="currentColor"
	491	+ >
	492	+ <path
	493	+ d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
	494	+ ></path>
	495	+ </svg>
	496	+ <span class="ml-4">Pages</span>
	497	+ </span>
	498	+ <svg
	499	+ class="w-4 h-4"
	500	+ aria-hidden="true"
	501	+ fill="currentColor"
	502	+ viewBox="0 0 20 20"
	503	+ >
	504	+ <path
	505	+ fill-rule="evenodd"
	506	+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
	507	+ clip-rule="evenodd"
	508	+ ></path>
	509	+ </svg>
	510	+ </button>
	511	+ <template x-if="isPagesMenuOpen">
	512	+ <ul
	513	+ x-transition:enter="transition-all ease-in-out duration-300"
	514	+ x-transition:enter-start="opacity-25 max-h-0"
	515	+ x-transition:enter-end="opacity-100 max-h-xl"
	516	+ x-transition:leave="transition-all ease-in-out duration-300"
	517	+ x-transition:leave-start="opacity-100 max-h-xl"
	518	+ x-transition:leave-end="opacity-0 max-h-0"
	519	+ class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
	520	+ aria-label="submenu"
	521	+ >
	522	+ <li
	523	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	524	+ >
	525	+ <a class="w-full" href="pages/login.html">Login</a>
	526	+ </li>
	527	+ <li
	528	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	529	+ >
	530	+ <a class="w-full" href="pages/create-account.html">
	531	+ Create account
	532	+ </a>
	533	+ </li>
	534	+ <li
	535	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	536	+ >
	537	+ <a class="w-full" href="pages/forgot-password.html">
	538	+ Forgot password
	539	+ </a>
	540	+ </li>
	541	+ <li
	542	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	543	+ >
	544	+ <a class="w-full" href="pages/404.html">404</a>
	545	+ </li>
	546	+ <li
	547	+ class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
	548	+ >
	549	+ <a class="w-full" href="pages/blank.html">Blank</a>
	550	+ </li>
	551	+ </ul>
	552	+ </template>
	553	+ </li>
	554	+ </ul>
	555	+ <div class="px-6 my-6">
	556	+ <button
	557	+ class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	558	+ >
	559	+ Create account
	560	+ <span class="ml-2" aria-hidden="true">+</span>
	561	+ </button>
	562	+ </div>
	563	+ </div>
	564	+ </aside>
	565	+ <div class="flex flex-col flex-1 w-full">
	566	+ <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
	567	+ <div
	568	+ class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
	569	+ >
	570	+ <!-- Mobile hamburger -->
	571	+ <button
	572	+ class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
	573	+ @click="toggleSideMenu"
	574	+ aria-label="Menu"
	575	+ >
	576	+ <svg
	577	+ class="w-6 h-6"
	578	+ aria-hidden="true"
	579	+ fill="currentColor"
	580	+ viewBox="0 0 20 20"
	581	+ >
	582	+ <path
	583	+ fill-rule="evenodd"
	584	+ d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
	585	+ clip-rule="evenodd"
	586	+ ></path>
	587	+ </svg>
	588	+ </button>
	589	+ <!-- Search input -->
	590	+ <div class="flex justify-center flex-1 lg:mr-32">
	591	+ <div
	592	+ class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
	593	+ >
	594	+ <div class="absolute inset-y-0 flex items-center pl-2">
	595	+ <svg
	596	+ class="w-4 h-4"
	597	+ aria-hidden="true"
	598	+ fill="currentColor"
	599	+ viewBox="0 0 20 20"
	600	+ >
	601	+ <path
	602	+ fill-rule="evenodd"
	603	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	604	+ clip-rule="evenodd"
	605	+ ></path>
	606	+ </svg>
	607	+ </div>
	608	+ <input
	609	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	610	+ type="text"
	611	+ placeholder="Search for projects"
	612	+ aria-label="Search"
	613	+ />
	614	+ </div>
	615	+ </div>
	616	+ <ul class="flex items-center flex-shrink-0 space-x-6">
	617	+ <!-- Theme toggler -->
	618	+ <li class="flex">
	619	+ <button
	620	+ class="rounded-md focus:outline-none focus:shadow-outline-purple"
	621	+ @click="toggleTheme"
	622	+ aria-label="Toggle color mode"
	623	+ >
	624	+ <template x-if="!dark">
	625	+ <svg
	626	+ class="w-5 h-5"
	627	+ aria-hidden="true"
	628	+ fill="currentColor"
	629	+ viewBox="0 0 20 20"
	630	+ >
	631	+ <path
	632	+ d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
	633	+ ></path>
	634	+ </svg>
	635	+ </template>
	636	+ <template x-if="dark">
	637	+ <svg
	638	+ class="w-5 h-5"
	639	+ aria-hidden="true"
	640	+ fill="currentColor"
	641	+ viewBox="0 0 20 20"
	642	+ >
	643	+ <path
	644	+ fill-rule="evenodd"
	645	+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
	646	+ clip-rule="evenodd"
	647	+ ></path>
	648	+ </svg>
	649	+ </template>
	650	+ </button>
	651	+ </li>
	652	+ <!-- Notifications menu -->
	653	+ <li class="relative">
	654	+ <button
	655	+ class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
	656	+ @click="toggleNotificationsMenu"
	657	+ @keydown.escape="closeNotificationsMenu"
	658	+ aria-label="Notifications"
	659	+ aria-haspopup="true"
	660	+ >
	661	+ <svg
	662	+ class="w-5 h-5"
	663	+ aria-hidden="true"
	664	+ fill="currentColor"
	665	+ viewBox="0 0 20 20"
	666	+ >
	667	+ <path
	668	+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
	669	+ ></path>
	670	+ </svg>
	671	+ <!-- Notification badge -->
	672	+ <span
	673	+ aria-hidden="true"
	674	+ class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
	675	+ ></span>
	676	+ </button>
	677	+ <template x-if="isNotificationsMenuOpen">
	678	+ <ul
	679	+ x-transition:leave="transition ease-in duration-150"
	680	+ x-transition:leave-start="opacity-100"
	681	+ x-transition:leave-end="opacity-0"
	682	+ @click.away="closeNotificationsMenu"
	683	+ @keydown.escape="closeNotificationsMenu"
	684	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
	685	+ aria-label="submenu"
	686	+ >
	687	+ <li class="flex">
	688	+ <a
	689	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	690	+ href="#"
	691	+ >
	692	+ <span>Messages</span>
	693	+ <span
	694	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	695	+ >
	696	+ 13
	697	+ </span>
	698	+ </a>
	699	+ </li>
	700	+ <li class="flex">
	701	+ <a
	702	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	703	+ href="#"
	704	+ >
	705	+ <span>Sales</span>
	706	+ <span
	707	+ class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
	708	+ >
	709	+ 2
	710	+ </span>
	711	+ </a>
	712	+ </li>
	713	+ <li class="flex">
	714	+ <a
	715	+ class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	716	+ href="#"
	717	+ >
	718	+ <span>Alerts</span>
	719	+ </a>
	720	+ </li>
	721	+ </ul>
	722	+ </template>
	723	+ </li>
	724	+ <!-- Profile menu -->
	725	+ <li class="relative">
	726	+ <button
	727	+ class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
	728	+ @click="toggleProfileMenu"
	729	+ @keydown.escape="closeProfileMenu"
	730	+ aria-label="Account"
	731	+ aria-haspopup="true"
	732	+ >
	733	+ <img
	734	+ class="object-cover w-8 h-8 rounded-full"
	735	+ src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
	736	+ alt=""
	737	+ aria-hidden="true"
	738	+ />
	739	+ </button>
	740	+ <template x-if="isProfileMenuOpen">
	741	+ <ul
	742	+ x-transition:leave="transition ease-in duration-150"
	743	+ x-transition:leave-start="opacity-100"
	744	+ x-transition:leave-end="opacity-0"
	745	+ @click.away="closeProfileMenu"
	746	+ @keydown.escape="closeProfileMenu"
	747	+ class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
	748	+ aria-label="submenu"
	749	+ >
	750	+ <li class="flex">
	751	+ <a
	752	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	753	+ href="#"
	754	+ >
	755	+ <svg
	756	+ class="w-4 h-4 mr-3"
	757	+ aria-hidden="true"
	758	+ fill="none"
	759	+ stroke-linecap="round"
	760	+ stroke-linejoin="round"
	761	+ stroke-width="2"
	762	+ viewBox="0 0 24 24"
	763	+ stroke="currentColor"
	764	+ >
	765	+ <path
	766	+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
	767	+ ></path>
	768	+ </svg>
	769	+ <span>Profile</span>
	770	+ </a>
	771	+ </li>
	772	+ <li class="flex">
	773	+ <a
	774	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	775	+ href="#"
	776	+ >
	777	+ <svg
	778	+ class="w-4 h-4 mr-3"
	779	+ aria-hidden="true"
	780	+ fill="none"
	781	+ stroke-linecap="round"
	782	+ stroke-linejoin="round"
	783	+ stroke-width="2"
	784	+ viewBox="0 0 24 24"
	785	+ stroke="currentColor"
	786	+ >
	787	+ <path
	788	+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
	789	+ ></path>
	790	+ <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
	791	+ </svg>
	792	+ <span>Settings</span>
	793	+ </a>
	794	+ </li>
	795	+ <li class="flex">
	796	+ <a
	797	+ class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
	798	+ href="#"
	799	+ >
	800	+ <svg
	801	+ class="w-4 h-4 mr-3"
	802	+ aria-hidden="true"
	803	+ fill="none"
	804	+ stroke-linecap="round"
	805	+ stroke-linejoin="round"
	806	+ stroke-width="2"
	807	+ viewBox="0 0 24 24"
	808	+ stroke="currentColor"
	809	+ >
	810	+ <path
	811	+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
	812	+ ></path>
	813	+ </svg>
	814	+ <span>Log out</span>
	815	+ </a>
	816	+ </li>
	817	+ </ul>
	818	+ </template>
	819	+ </li>
	820	+ </ul>
	821	+ </div>
	822	+ </header>
	823	+ <main class="h-full pb-16 overflow-y-auto">
	824	+ <div class="container grid px-6 mx-auto">
	825	+ <h2
	826	+ class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
	827	+ >
	828	+ Tables
	829	+ </h2>
	830	+ <!-- CTA -->
	831	+ <a
	832	+ class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
	833	+ href="https://github.com/estevanmaito/windmill-dashboard"
	834	+ >
	835	+ <div class="flex items-center">
	836	+ <svg
	837	+ class="w-5 h-5 mr-2"
	838	+ fill="currentColor"
	839	+ viewBox="0 0 20 20"
	840	+ >
	841	+ <path
	842	+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
	843	+ ></path>
	844	+ </svg>
	845	+ <span>Star this project on GitHub</span>
	846	+ </div>
	847	+ <span>View more &RightArrow;</span>
	848	+ </a>
	849	+
	850	+ <!-- With avatar -->
	851	+ <h4
	852	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	853	+ >
	854	+ Table with avatars
	855	+ </h4>
	856	+ <div class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
	857	+ <div class="w-full overflow-x-auto">
	858	+ <table class="w-full whitespace-no-wrap">
	859	+ <thead>
	860	+ <tr
	861	+ class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
	862	+ >
	863	+ <th class="px-4 py-3">Client</th>
	864	+ <th class="px-4 py-3">Amount</th>
	865	+ <th class="px-4 py-3">Status</th>
	866	+ <th class="px-4 py-3">Date</th>
	867	+ </tr>
	868	+ </thead>
	869	+ <tbody
	870	+ class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
	871	+ >
	872	+ <tr class="text-gray-700 dark:text-gray-400">
	873	+ <td class="px-4 py-3">
	874	+ <div class="flex items-center text-sm">
	875	+ <!-- Avatar with inset shadow -->
	876	+ <div
	877	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	878	+ >
	879	+ <img
	880	+ class="object-cover w-full h-full rounded-full"
	881	+ src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	882	+ alt=""
	883	+ loading="lazy"
	884	+ />
	885	+ <div
	886	+ class="absolute inset-0 rounded-full shadow-inner"
	887	+ aria-hidden="true"
	888	+ ></div>
	889	+ </div>
	890	+ <div>
	891	+ <p class="font-semibold">Hans Burger</p>
	892	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	893	+ 10x Developer
	894	+ </p>
	895	+ </div>
	896	+ </div>
	897	+ </td>
	898	+ <td class="px-4 py-3 text-sm">
	899	+ $ 863.45
	900	+ </td>
	901	+ <td class="px-4 py-3 text-xs">
	902	+ <span
	903	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	904	+ >
	905	+ Approved
	906	+ </span>
	907	+ </td>
	908	+ <td class="px-4 py-3 text-sm">
	909	+ 6/10/2020
	910	+ </td>
	911	+ </tr>
	912	+
	913	+ <tr class="text-gray-700 dark:text-gray-400">
	914	+ <td class="px-4 py-3">
	915	+ <div class="flex items-center text-sm">
	916	+ <!-- Avatar with inset shadow -->
	917	+ <div
	918	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	919	+ >
	920	+ <img
	921	+ class="object-cover w-full h-full rounded-full"
	922	+ src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&facepad=3&fit=facearea&s=707b9c33066bf8808c934c8ab394dff6"
	923	+ alt=""
	924	+ loading="lazy"
	925	+ />
	926	+ <div
	927	+ class="absolute inset-0 rounded-full shadow-inner"
	928	+ aria-hidden="true"
	929	+ ></div>
	930	+ </div>
	931	+ <div>
	932	+ <p class="font-semibold">Jolina Angelie</p>
	933	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	934	+ Unemployed
	935	+ </p>
	936	+ </div>
	937	+ </div>
	938	+ </td>
	939	+ <td class="px-4 py-3 text-sm">
	940	+ $ 369.95
	941	+ </td>
	942	+ <td class="px-4 py-3 text-xs">
	943	+ <span
	944	+ class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"
	945	+ >
	946	+ Pending
	947	+ </span>
	948	+ </td>
	949	+ <td class="px-4 py-3 text-sm">
	950	+ 6/10/2020
	951	+ </td>
	952	+ </tr>
	953	+
	954	+ <tr class="text-gray-700 dark:text-gray-400">
	955	+ <td class="px-4 py-3">
	956	+ <div class="flex items-center text-sm">
	957	+ <!-- Avatar with inset shadow -->
	958	+ <div
	959	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	960	+ >
	961	+ <img
	962	+ class="object-cover w-full h-full rounded-full"
	963	+ src="https://images.unsplash.com/photo-1551069613-1904dbdcda11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	964	+ alt=""
	965	+ loading="lazy"
	966	+ />
	967	+ <div
	968	+ class="absolute inset-0 rounded-full shadow-inner"
	969	+ aria-hidden="true"
	970	+ ></div>
	971	+ </div>
	972	+ <div>
	973	+ <p class="font-semibold">Sarah Curry</p>
	974	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	975	+ Designer
	976	+ </p>
	977	+ </div>
	978	+ </div>
	979	+ </td>
	980	+ <td class="px-4 py-3 text-sm">
	981	+ $ 86.00
	982	+ </td>
	983	+ <td class="px-4 py-3 text-xs">
	984	+ <span
	985	+ class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-700"
	986	+ >
	987	+ Denied
	988	+ </span>
	989	+ </td>
	990	+ <td class="px-4 py-3 text-sm">
	991	+ 6/10/2020
	992	+ </td>
	993	+ </tr>
	994	+
	995	+ <tr class="text-gray-700 dark:text-gray-400">
	996	+ <td class="px-4 py-3">
	997	+ <div class="flex items-center text-sm">
	998	+ <!-- Avatar with inset shadow -->
	999	+ <div
	1000	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1001	+ >
	1002	+ <img
	1003	+ class="object-cover w-full h-full rounded-full"
	1004	+ src="https://images.unsplash.com/photo-1551006917-3b4c078c47c9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1005	+ alt=""
	1006	+ loading="lazy"
	1007	+ />
	1008	+ <div
	1009	+ class="absolute inset-0 rounded-full shadow-inner"
	1010	+ aria-hidden="true"
	1011	+ ></div>
	1012	+ </div>
	1013	+ <div>
	1014	+ <p class="font-semibold">Rulia Joberts</p>
	1015	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1016	+ Actress
	1017	+ </p>
	1018	+ </div>
	1019	+ </div>
	1020	+ </td>
	1021	+ <td class="px-4 py-3 text-sm">
	1022	+ $ 1276.45
	1023	+ </td>
	1024	+ <td class="px-4 py-3 text-xs">
	1025	+ <span
	1026	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1027	+ >
	1028	+ Approved
	1029	+ </span>
	1030	+ </td>
	1031	+ <td class="px-4 py-3 text-sm">
	1032	+ 6/10/2020
	1033	+ </td>
	1034	+ </tr>
	1035	+
	1036	+ <tr class="text-gray-700 dark:text-gray-400">
	1037	+ <td class="px-4 py-3">
	1038	+ <div class="flex items-center text-sm">
	1039	+ <!-- Avatar with inset shadow -->
	1040	+ <div
	1041	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1042	+ >
	1043	+ <img
	1044	+ class="object-cover w-full h-full rounded-full"
	1045	+ src="https://images.unsplash.com/photo-1546456073-6712f79251bb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1046	+ alt=""
	1047	+ loading="lazy"
	1048	+ />
	1049	+ <div
	1050	+ class="absolute inset-0 rounded-full shadow-inner"
	1051	+ aria-hidden="true"
	1052	+ ></div>
	1053	+ </div>
	1054	+ <div>
	1055	+ <p class="font-semibold">Wenzel Dashington</p>
	1056	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1057	+ Actor
	1058	+ </p>
	1059	+ </div>
	1060	+ </div>
	1061	+ </td>
	1062	+ <td class="px-4 py-3 text-sm">
	1063	+ $ 863.45
	1064	+ </td>
	1065	+ <td class="px-4 py-3 text-xs">
	1066	+ <span
	1067	+ class="px-2 py-1 font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full dark:text-gray-100 dark:bg-gray-700"
	1068	+ >
	1069	+ Expired
	1070	+ </span>
	1071	+ </td>
	1072	+ <td class="px-4 py-3 text-sm">
	1073	+ 6/10/2020
	1074	+ </td>
	1075	+ </tr>
	1076	+
	1077	+ <tr class="text-gray-700 dark:text-gray-400">
	1078	+ <td class="px-4 py-3">
	1079	+ <div class="flex items-center text-sm">
	1080	+ <!-- Avatar with inset shadow -->
	1081	+ <div
	1082	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1083	+ >
	1084	+ <img
	1085	+ class="object-cover w-full h-full rounded-full"
	1086	+ src="https://images.unsplash.com/photo-1502720705749-871143f0e671?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=b8377ca9f985d80264279f277f3a67f5"
	1087	+ alt=""
	1088	+ loading="lazy"
	1089	+ />
	1090	+ <div
	1091	+ class="absolute inset-0 rounded-full shadow-inner"
	1092	+ aria-hidden="true"
	1093	+ ></div>
	1094	+ </div>
	1095	+ <div>
	1096	+ <p class="font-semibold">Dave Li</p>
	1097	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1098	+ Influencer
	1099	+ </p>
	1100	+ </div>
	1101	+ </div>
	1102	+ </td>
	1103	+ <td class="px-4 py-3 text-sm">
	1104	+ $ 863.45
	1105	+ </td>
	1106	+ <td class="px-4 py-3 text-xs">
	1107	+ <span
	1108	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1109	+ >
	1110	+ Approved
	1111	+ </span>
	1112	+ </td>
	1113	+ <td class="px-4 py-3 text-sm">
	1114	+ 6/10/2020
	1115	+ </td>
	1116	+ </tr>
	1117	+
	1118	+ <tr class="text-gray-700 dark:text-gray-400">
	1119	+ <td class="px-4 py-3">
	1120	+ <div class="flex items-center text-sm">
	1121	+ <!-- Avatar with inset shadow -->
	1122	+ <div
	1123	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1124	+ >
	1125	+ <img
	1126	+ class="object-cover w-full h-full rounded-full"
	1127	+ src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1128	+ alt=""
	1129	+ loading="lazy"
	1130	+ />
	1131	+ <div
	1132	+ class="absolute inset-0 rounded-full shadow-inner"
	1133	+ aria-hidden="true"
	1134	+ ></div>
	1135	+ </div>
	1136	+ <div>
	1137	+ <p class="font-semibold">Maria Ramovic</p>
	1138	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1139	+ Runner
	1140	+ </p>
	1141	+ </div>
	1142	+ </div>
	1143	+ </td>
	1144	+ <td class="px-4 py-3 text-sm">
	1145	+ $ 863.45
	1146	+ </td>
	1147	+ <td class="px-4 py-3 text-xs">
	1148	+ <span
	1149	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1150	+ >
	1151	+ Approved
	1152	+ </span>
	1153	+ </td>
	1154	+ <td class="px-4 py-3 text-sm">
	1155	+ 6/10/2020
	1156	+ </td>
	1157	+ </tr>
	1158	+
	1159	+ <tr class="text-gray-700 dark:text-gray-400">
	1160	+ <td class="px-4 py-3">
	1161	+ <div class="flex items-center text-sm">
	1162	+ <!-- Avatar with inset shadow -->
	1163	+ <div
	1164	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1165	+ >
	1166	+ <img
	1167	+ class="object-cover w-full h-full rounded-full"
	1168	+ src="https://images.unsplash.com/photo-1566411520896-01e7ca4726af?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1169	+ alt=""
	1170	+ loading="lazy"
	1171	+ />
	1172	+ <div
	1173	+ class="absolute inset-0 rounded-full shadow-inner"
	1174	+ aria-hidden="true"
	1175	+ ></div>
	1176	+ </div>
	1177	+ <div>
	1178	+ <p class="font-semibold">Hitney Wouston</p>
	1179	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1180	+ Singer
	1181	+ </p>
	1182	+ </div>
	1183	+ </div>
	1184	+ </td>
	1185	+ <td class="px-4 py-3 text-sm">
	1186	+ $ 863.45
	1187	+ </td>
	1188	+ <td class="px-4 py-3 text-xs">
	1189	+ <span
	1190	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1191	+ >
	1192	+ Approved
	1193	+ </span>
	1194	+ </td>
	1195	+ <td class="px-4 py-3 text-sm">
	1196	+ 6/10/2020
	1197	+ </td>
	1198	+ </tr>
	1199	+
	1200	+ <tr class="text-gray-700 dark:text-gray-400">
	1201	+ <td class="px-4 py-3">
	1202	+ <div class="flex items-center text-sm">
	1203	+ <!-- Avatar with inset shadow -->
	1204	+ <div
	1205	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1206	+ >
	1207	+ <img
	1208	+ class="object-cover w-full h-full rounded-full"
	1209	+ src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1210	+ alt=""
	1211	+ loading="lazy"
	1212	+ />
	1213	+ <div
	1214	+ class="absolute inset-0 rounded-full shadow-inner"
	1215	+ aria-hidden="true"
	1216	+ ></div>
	1217	+ </div>
	1218	+ <div>
	1219	+ <p class="font-semibold">Hans Burger</p>
	1220	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1221	+ 10x Developer
	1222	+ </p>
	1223	+ </div>
	1224	+ </div>
	1225	+ </td>
	1226	+ <td class="px-4 py-3 text-sm">
	1227	+ $ 863.45
	1228	+ </td>
	1229	+ <td class="px-4 py-3 text-xs">
	1230	+ <span
	1231	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1232	+ >
	1233	+ Approved
	1234	+ </span>
	1235	+ </td>
	1236	+ <td class="px-4 py-3 text-sm">
	1237	+ 6/10/2020
	1238	+ </td>
	1239	+ </tr>
	1240	+ </tbody>
	1241	+ </table>
	1242	+ </div>
	1243	+ <div
	1244	+ class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800"
	1245	+ >
	1246	+ <span class="flex items-center col-span-3">
	1247	+ Showing 21-30 of 100
	1248	+ </span>
	1249	+ <span class="col-span-2"></span>
	1250	+ <!-- Pagination -->
	1251	+ <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
	1252	+ <nav aria-label="Table navigation">
	1253	+ <ul class="inline-flex items-center">
	1254	+ <li>
	1255	+ <button
	1256	+ class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
	1257	+ aria-label="Previous"
	1258	+ >
	1259	+ <svg
	1260	+ aria-hidden="true"
	1261	+ class="w-4 h-4 fill-current"
	1262	+ viewBox="0 0 20 20"
	1263	+ >
	1264	+ <path
	1265	+ 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"
	1266	+ clip-rule="evenodd"
	1267	+ fill-rule="evenodd"
	1268	+ ></path>
	1269	+ </svg>
	1270	+ </button>
	1271	+ </li>
	1272	+ <li>
	1273	+ <button
	1274	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1275	+ >
	1276	+ 1
	1277	+ </button>
	1278	+ </li>
	1279	+ <li>
	1280	+ <button
	1281	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1282	+ >
	1283	+ 2
	1284	+ </button>
	1285	+ </li>
	1286	+ <li>
	1287	+ <button
	1288	+ class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple"
	1289	+ >
	1290	+ 3
	1291	+ </button>
	1292	+ </li>
	1293	+ <li>
	1294	+ <button
	1295	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1296	+ >
	1297	+ 4
	1298	+ </button>
	1299	+ </li>
	1300	+ <li>
	1301	+ <span class="px-3 py-1">...</span>
	1302	+ </li>
	1303	+ <li>
	1304	+ <button
	1305	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1306	+ >
	1307	+ 8
	1308	+ </button>
	1309	+ </li>
	1310	+ <li>
	1311	+ <button
	1312	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	1313	+ >
	1314	+ 9
	1315	+ </button>
	1316	+ </li>
	1317	+ <li>
	1318	+ <button
	1319	+ class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
	1320	+ aria-label="Next"
	1321	+ >
	1322	+ <svg
	1323	+ class="w-4 h-4 fill-current"
	1324	+ aria-hidden="true"
	1325	+ viewBox="0 0 20 20"
	1326	+ >
	1327	+ <path
	1328	+ 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"
	1329	+ clip-rule="evenodd"
	1330	+ fill-rule="evenodd"
	1331	+ ></path>
	1332	+ </svg>
	1333	+ </button>
	1334	+ </li>
	1335	+ </ul>
	1336	+ </nav>
	1337	+ </span>
	1338	+ </div>
	1339	+ </div>
	1340	+
	1341	+ <!-- With actions -->
	1342	+ <h4
	1343	+ class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
	1344	+ >
	1345	+ Table with actions
	1346	+ </h4>
	1347	+ <div class="w-full overflow-hidden rounded-lg shadow-xs">
	1348	+ <div class="w-full overflow-x-auto">
	1349	+ <table class="w-full whitespace-no-wrap">
	1350	+ <thead>
	1351	+ <tr
	1352	+ class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
	1353	+ >
	1354	+ <th class="px-4 py-3">Client</th>
	1355	+ <th class="px-4 py-3">Amount</th>
	1356	+ <th class="px-4 py-3">Status</th>
	1357	+ <th class="px-4 py-3">Date</th>
	1358	+ <th class="px-4 py-3">Actions</th>
	1359	+ </tr>
	1360	+ </thead>
	1361	+ <tbody
	1362	+ class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
	1363	+ >
	1364	+ <tr class="text-gray-700 dark:text-gray-400">
	1365	+ <td class="px-4 py-3">
	1366	+ <div class="flex items-center text-sm">
	1367	+ <!-- Avatar with inset shadow -->
	1368	+ <div
	1369	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1370	+ >
	1371	+ <img
	1372	+ class="object-cover w-full h-full rounded-full"
	1373	+ src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1374	+ alt=""
	1375	+ loading="lazy"
	1376	+ />
	1377	+ <div
	1378	+ class="absolute inset-0 rounded-full shadow-inner"
	1379	+ aria-hidden="true"
	1380	+ ></div>
	1381	+ </div>
	1382	+ <div>
	1383	+ <p class="font-semibold">Hans Burger</p>
	1384	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1385	+ 10x Developer
	1386	+ </p>
	1387	+ </div>
	1388	+ </div>
	1389	+ </td>
	1390	+ <td class="px-4 py-3 text-sm">
	1391	+ $ 863.45
	1392	+ </td>
	1393	+ <td class="px-4 py-3 text-xs">
	1394	+ <span
	1395	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1396	+ >
	1397	+ Approved
	1398	+ </span>
	1399	+ </td>
	1400	+ <td class="px-4 py-3 text-sm">
	1401	+ 6/10/2020
	1402	+ </td>
	1403	+ <td class="px-4 py-3">
	1404	+ <div class="flex items-center space-x-4 text-sm">
	1405	+ <button
	1406	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1407	+ aria-label="Edit"
	1408	+ >
	1409	+ <svg
	1410	+ class="w-5 h-5"
	1411	+ aria-hidden="true"
	1412	+ fill="currentColor"
	1413	+ viewBox="0 0 20 20"
	1414	+ >
	1415	+ <path
	1416	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1417	+ ></path>
	1418	+ </svg>
	1419	+ </button>
	1420	+ <button
	1421	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1422	+ aria-label="Delete"
	1423	+ >
	1424	+ <svg
	1425	+ class="w-5 h-5"
	1426	+ aria-hidden="true"
	1427	+ fill="currentColor"
	1428	+ viewBox="0 0 20 20"
	1429	+ >
	1430	+ <path
	1431	+ fill-rule="evenodd"
	1432	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	1433	+ clip-rule="evenodd"
	1434	+ ></path>
	1435	+ </svg>
	1436	+ </button>
	1437	+ </div>
	1438	+ </td>
	1439	+ </tr>
	1440	+
	1441	+ <tr class="text-gray-700 dark:text-gray-400">
	1442	+ <td class="px-4 py-3">
	1443	+ <div class="flex items-center text-sm">
	1444	+ <!-- Avatar with inset shadow -->
	1445	+ <div
	1446	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1447	+ >
	1448	+ <img
	1449	+ class="object-cover w-full h-full rounded-full"
	1450	+ src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&facepad=3&fit=facearea&s=707b9c33066bf8808c934c8ab394dff6"
	1451	+ alt=""
	1452	+ loading="lazy"
	1453	+ />
	1454	+ <div
	1455	+ class="absolute inset-0 rounded-full shadow-inner"
	1456	+ aria-hidden="true"
	1457	+ ></div>
	1458	+ </div>
	1459	+ <div>
	1460	+ <p class="font-semibold">Jolina Angelie</p>
	1461	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1462	+ Unemployed
	1463	+ </p>
	1464	+ </div>
	1465	+ </div>
	1466	+ </td>
	1467	+ <td class="px-4 py-3 text-sm">
	1468	+ $ 369.95
	1469	+ </td>
	1470	+ <td class="px-4 py-3 text-xs">
	1471	+ <span
	1472	+ class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"
	1473	+ >
	1474	+ Pending
	1475	+ </span>
	1476	+ </td>
	1477	+ <td class="px-4 py-3 text-sm">
	1478	+ 6/10/2020
	1479	+ </td>
	1480	+ <td class="px-4 py-3">
	1481	+ <div class="flex items-center space-x-4 text-sm">
	1482	+ <button
	1483	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1484	+ aria-label="Edit"
	1485	+ >
	1486	+ <svg
	1487	+ class="w-5 h-5"
	1488	+ aria-hidden="true"
	1489	+ fill="currentColor"
	1490	+ viewBox="0 0 20 20"
	1491	+ >
	1492	+ <path
	1493	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1494	+ ></path>
	1495	+ </svg>
	1496	+ </button>
	1497	+ <button
	1498	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1499	+ aria-label="Delete"
	1500	+ >
	1501	+ <svg
	1502	+ class="w-5 h-5"
	1503	+ aria-hidden="true"
	1504	+ fill="currentColor"
	1505	+ viewBox="0 0 20 20"
	1506	+ >
	1507	+ <path
	1508	+ fill-rule="evenodd"
	1509	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	1510	+ clip-rule="evenodd"
	1511	+ ></path>
	1512	+ </svg>
	1513	+ </button>
	1514	+ </div>
	1515	+ </td>
	1516	+ </tr>
	1517	+
	1518	+ <tr class="text-gray-700 dark:text-gray-400">
	1519	+ <td class="px-4 py-3">
	1520	+ <div class="flex items-center text-sm">
	1521	+ <!-- Avatar with inset shadow -->
	1522	+ <div
	1523	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1524	+ >
	1525	+ <img
	1526	+ class="object-cover w-full h-full rounded-full"
	1527	+ src="https://images.unsplash.com/photo-1551069613-1904dbdcda11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1528	+ alt=""
	1529	+ loading="lazy"
	1530	+ />
	1531	+ <div
	1532	+ class="absolute inset-0 rounded-full shadow-inner"
	1533	+ aria-hidden="true"
	1534	+ ></div>
	1535	+ </div>
	1536	+ <div>
	1537	+ <p class="font-semibold">Sarah Curry</p>
	1538	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1539	+ Designer
	1540	+ </p>
	1541	+ </div>
	1542	+ </div>
	1543	+ </td>
	1544	+ <td class="px-4 py-3 text-sm">
	1545	+ $ 86.00
	1546	+ </td>
	1547	+ <td class="px-4 py-3 text-xs">
	1548	+ <span
	1549	+ class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-700"
	1550	+ >
	1551	+ Denied
	1552	+ </span>
	1553	+ </td>
	1554	+ <td class="px-4 py-3 text-sm">
	1555	+ 6/10/2020
	1556	+ </td>
	1557	+ <td class="px-4 py-3">
	1558	+ <div class="flex items-center space-x-4 text-sm">
	1559	+ <button
	1560	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1561	+ aria-label="Edit"
	1562	+ >
	1563	+ <svg
	1564	+ class="w-5 h-5"
	1565	+ aria-hidden="true"
	1566	+ fill="currentColor"
	1567	+ viewBox="0 0 20 20"
	1568	+ >
	1569	+ <path
	1570	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1571	+ ></path>
	1572	+ </svg>
	1573	+ </button>
	1574	+ <button
	1575	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1576	+ aria-label="Delete"
	1577	+ >
	1578	+ <svg
	1579	+ class="w-5 h-5"
	1580	+ aria-hidden="true"
	1581	+ fill="currentColor"
	1582	+ viewBox="0 0 20 20"
	1583	+ >
	1584	+ <path
	1585	+ fill-rule="evenodd"
	1586	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	1587	+ clip-rule="evenodd"
	1588	+ ></path>
	1589	+ </svg>
	1590	+ </button>
	1591	+ </div>
	1592	+ </td>
	1593	+ </tr>
	1594	+
	1595	+ <tr class="text-gray-700 dark:text-gray-400">
	1596	+ <td class="px-4 py-3">
	1597	+ <div class="flex items-center text-sm">
	1598	+ <!-- Avatar with inset shadow -->
	1599	+ <div
	1600	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1601	+ >
	1602	+ <img
	1603	+ class="object-cover w-full h-full rounded-full"
	1604	+ src="https://images.unsplash.com/photo-1551006917-3b4c078c47c9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1605	+ alt=""
	1606	+ loading="lazy"
	1607	+ />
	1608	+ <div
	1609	+ class="absolute inset-0 rounded-full shadow-inner"
	1610	+ aria-hidden="true"
	1611	+ ></div>
	1612	+ </div>
	1613	+ <div>
	1614	+ <p class="font-semibold">Rulia Joberts</p>
	1615	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1616	+ Actress
	1617	+ </p>
	1618	+ </div>
	1619	+ </div>
	1620	+ </td>
	1621	+ <td class="px-4 py-3 text-sm">
	1622	+ $ 1276.45
	1623	+ </td>
	1624	+ <td class="px-4 py-3 text-xs">
	1625	+ <span
	1626	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1627	+ >
	1628	+ Approved
	1629	+ </span>
	1630	+ </td>
	1631	+ <td class="px-4 py-3 text-sm">
	1632	+ 6/10/2020
	1633	+ </td>
	1634	+ <td class="px-4 py-3">
	1635	+ <div class="flex items-center space-x-4 text-sm">
	1636	+ <button
	1637	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1638	+ aria-label="Edit"
	1639	+ >
	1640	+ <svg
	1641	+ class="w-5 h-5"
	1642	+ aria-hidden="true"
	1643	+ fill="currentColor"
	1644	+ viewBox="0 0 20 20"
	1645	+ >
	1646	+ <path
	1647	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1648	+ ></path>
	1649	+ </svg>
	1650	+ </button>
	1651	+ <button
	1652	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1653	+ aria-label="Delete"
	1654	+ >
	1655	+ <svg
	1656	+ class="w-5 h-5"
	1657	+ aria-hidden="true"
	1658	+ fill="currentColor"
	1659	+ viewBox="0 0 20 20"
	1660	+ >
	1661	+ <path
	1662	+ fill-rule="evenodd"
	1663	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	1664	+ clip-rule="evenodd"
	1665	+ ></path>
	1666	+ </svg>
	1667	+ </button>
	1668	+ </div>
	1669	+ </td>
	1670	+ </tr>
	1671	+
	1672	+ <tr class="text-gray-700 dark:text-gray-400">
	1673	+ <td class="px-4 py-3">
	1674	+ <div class="flex items-center text-sm">
	1675	+ <!-- Avatar with inset shadow -->
	1676	+ <div
	1677	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1678	+ >
	1679	+ <img
	1680	+ class="object-cover w-full h-full rounded-full"
	1681	+ src="https://images.unsplash.com/photo-1546456073-6712f79251bb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1682	+ alt=""
	1683	+ loading="lazy"
	1684	+ />
	1685	+ <div
	1686	+ class="absolute inset-0 rounded-full shadow-inner"
	1687	+ aria-hidden="true"
	1688	+ ></div>
	1689	+ </div>
	1690	+ <div>
	1691	+ <p class="font-semibold">Wenzel Dashington</p>
	1692	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1693	+ Actor
	1694	+ </p>
	1695	+ </div>
	1696	+ </div>
	1697	+ </td>
	1698	+ <td class="px-4 py-3 text-sm">
	1699	+ $ 863.45
	1700	+ </td>
	1701	+ <td class="px-4 py-3 text-xs">
	1702	+ <span
	1703	+ class="px-2 py-1 font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full dark:text-gray-100 dark:bg-gray-700"
	1704	+ >
	1705	+ Expired
	1706	+ </span>
	1707	+ </td>
	1708	+ <td class="px-4 py-3 text-sm">
	1709	+ 6/10/2020
	1710	+ </td>
	1711	+ <td class="px-4 py-3">
	1712	+ <div class="flex items-center space-x-4 text-sm">
	1713	+ <button
	1714	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1715	+ aria-label="Edit"
	1716	+ >
	1717	+ <svg
	1718	+ class="w-5 h-5"
	1719	+ aria-hidden="true"
	1720	+ fill="currentColor"
	1721	+ viewBox="0 0 20 20"
	1722	+ >
	1723	+ <path
	1724	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1725	+ ></path>
	1726	+ </svg>
	1727	+ </button>
	1728	+ <button
	1729	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1730	+ aria-label="Delete"
	1731	+ >
	1732	+ <svg
	1733	+ class="w-5 h-5"
	1734	+ aria-hidden="true"
	1735	+ fill="currentColor"
	1736	+ viewBox="0 0 20 20"
	1737	+ >
	1738	+ <path
	1739	+ fill-rule="evenodd"
	1740	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	1741	+ clip-rule="evenodd"
	1742	+ ></path>
	1743	+ </svg>
	1744	+ </button>
	1745	+ </div>
	1746	+ </td>
	1747	+ </tr>
	1748	+
	1749	+ <tr class="text-gray-700 dark:text-gray-400">
	1750	+ <td class="px-4 py-3">
	1751	+ <div class="flex items-center text-sm">
	1752	+ <!-- Avatar with inset shadow -->
	1753	+ <div
	1754	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1755	+ >
	1756	+ <img
	1757	+ class="object-cover w-full h-full rounded-full"
	1758	+ src="https://images.unsplash.com/photo-1502720705749-871143f0e671?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=b8377ca9f985d80264279f277f3a67f5"
	1759	+ alt=""
	1760	+ loading="lazy"
	1761	+ />
	1762	+ <div
	1763	+ class="absolute inset-0 rounded-full shadow-inner"
	1764	+ aria-hidden="true"
	1765	+ ></div>
	1766	+ </div>
	1767	+ <div>
	1768	+ <p class="font-semibold">Dave Li</p>
	1769	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1770	+ Influencer
	1771	+ </p>
	1772	+ </div>
	1773	+ </div>
	1774	+ </td>
	1775	+ <td class="px-4 py-3 text-sm">
	1776	+ $ 863.45
	1777	+ </td>
	1778	+ <td class="px-4 py-3 text-xs">
	1779	+ <span
	1780	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1781	+ >
	1782	+ Approved
	1783	+ </span>
	1784	+ </td>
	1785	+ <td class="px-4 py-3 text-sm">
	1786	+ 6/10/2020
	1787	+ </td>
	1788	+ <td class="px-4 py-3">
	1789	+ <div class="flex items-center space-x-4 text-sm">
	1790	+ <button
	1791	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1792	+ aria-label="Edit"
	1793	+ >
	1794	+ <svg
	1795	+ class="w-5 h-5"
	1796	+ aria-hidden="true"
	1797	+ fill="currentColor"
	1798	+ viewBox="0 0 20 20"
	1799	+ >
	1800	+ <path
	1801	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1802	+ ></path>
	1803	+ </svg>
	1804	+ </button>
	1805	+ <button
	1806	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1807	+ aria-label="Delete"
	1808	+ >
	1809	+ <svg
	1810	+ class="w-5 h-5"
	1811	+ aria-hidden="true"
	1812	+ fill="currentColor"
	1813	+ viewBox="0 0 20 20"
	1814	+ >
	1815	+ <path
	1816	+ fill-rule="evenodd"
	1817	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	1818	+ clip-rule="evenodd"
	1819	+ ></path>
	1820	+ </svg>
	1821	+ </button>
	1822	+ </div>
	1823	+ </td>
	1824	+ </tr>
	1825	+
	1826	+ <tr class="text-gray-700 dark:text-gray-400">
	1827	+ <td class="px-4 py-3">
	1828	+ <div class="flex items-center text-sm">
	1829	+ <!-- Avatar with inset shadow -->
	1830	+ <div
	1831	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1832	+ >
	1833	+ <img
	1834	+ class="object-cover w-full h-full rounded-full"
	1835	+ src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1836	+ alt=""
	1837	+ loading="lazy"
	1838	+ />
	1839	+ <div
	1840	+ class="absolute inset-0 rounded-full shadow-inner"
	1841	+ aria-hidden="true"
	1842	+ ></div>
	1843	+ </div>
	1844	+ <div>
	1845	+ <p class="font-semibold">Maria Ramovic</p>
	1846	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1847	+ Runner
	1848	+ </p>
	1849	+ </div>
	1850	+ </div>
	1851	+ </td>
	1852	+ <td class="px-4 py-3 text-sm">
	1853	+ $ 863.45
	1854	+ </td>
	1855	+ <td class="px-4 py-3 text-xs">
	1856	+ <span
	1857	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1858	+ >
	1859	+ Approved
	1860	+ </span>
	1861	+ </td>
	1862	+ <td class="px-4 py-3 text-sm">
	1863	+ 6/10/2020
	1864	+ </td>
	1865	+ <td class="px-4 py-3">
	1866	+ <div class="flex items-center space-x-4 text-sm">
	1867	+ <button
	1868	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1869	+ aria-label="Edit"
	1870	+ >
	1871	+ <svg
	1872	+ class="w-5 h-5"
	1873	+ aria-hidden="true"
	1874	+ fill="currentColor"
	1875	+ viewBox="0 0 20 20"
	1876	+ >
	1877	+ <path
	1878	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1879	+ ></path>
	1880	+ </svg>
	1881	+ </button>
	1882	+ <button
	1883	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1884	+ aria-label="Delete"
	1885	+ >
	1886	+ <svg
	1887	+ class="w-5 h-5"
	1888	+ aria-hidden="true"
	1889	+ fill="currentColor"
	1890	+ viewBox="0 0 20 20"
	1891	+ >
	1892	+ <path
	1893	+ fill-rule="evenodd"
	1894	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	1895	+ clip-rule="evenodd"
	1896	+ ></path>
	1897	+ </svg>
	1898	+ </button>
	1899	+ </div>
	1900	+ </td>
	1901	+ </tr>
	1902	+
	1903	+ <tr class="text-gray-700 dark:text-gray-400">
	1904	+ <td class="px-4 py-3">
	1905	+ <div class="flex items-center text-sm">
	1906	+ <!-- Avatar with inset shadow -->
	1907	+ <div
	1908	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1909	+ >
	1910	+ <img
	1911	+ class="object-cover w-full h-full rounded-full"
	1912	+ src="https://images.unsplash.com/photo-1566411520896-01e7ca4726af?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1913	+ alt=""
	1914	+ loading="lazy"
	1915	+ />
	1916	+ <div
	1917	+ class="absolute inset-0 rounded-full shadow-inner"
	1918	+ aria-hidden="true"
	1919	+ ></div>
	1920	+ </div>
	1921	+ <div>
	1922	+ <p class="font-semibold">Hitney Wouston</p>
	1923	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	1924	+ Singer
	1925	+ </p>
	1926	+ </div>
	1927	+ </div>
	1928	+ </td>
	1929	+ <td class="px-4 py-3 text-sm">
	1930	+ $ 863.45
	1931	+ </td>
	1932	+ <td class="px-4 py-3 text-xs">
	1933	+ <span
	1934	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	1935	+ >
	1936	+ Approved
	1937	+ </span>
	1938	+ </td>
	1939	+ <td class="px-4 py-3 text-sm">
	1940	+ 6/10/2020
	1941	+ </td>
	1942	+ <td class="px-4 py-3">
	1943	+ <div class="flex items-center space-x-4 text-sm">
	1944	+ <button
	1945	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1946	+ aria-label="Edit"
	1947	+ >
	1948	+ <svg
	1949	+ class="w-5 h-5"
	1950	+ aria-hidden="true"
	1951	+ fill="currentColor"
	1952	+ viewBox="0 0 20 20"
	1953	+ >
	1954	+ <path
	1955	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	1956	+ ></path>
	1957	+ </svg>
	1958	+ </button>
	1959	+ <button
	1960	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	1961	+ aria-label="Delete"
	1962	+ >
	1963	+ <svg
	1964	+ class="w-5 h-5"
	1965	+ aria-hidden="true"
	1966	+ fill="currentColor"
	1967	+ viewBox="0 0 20 20"
	1968	+ >
	1969	+ <path
	1970	+ fill-rule="evenodd"
	1971	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	1972	+ clip-rule="evenodd"
	1973	+ ></path>
	1974	+ </svg>
	1975	+ </button>
	1976	+ </div>
	1977	+ </td>
	1978	+ </tr>
	1979	+
	1980	+ <tr class="text-gray-700 dark:text-gray-400">
	1981	+ <td class="px-4 py-3">
	1982	+ <div class="flex items-center text-sm">
	1983	+ <!-- Avatar with inset shadow -->
	1984	+ <div
	1985	+ class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
	1986	+ >
	1987	+ <img
	1988	+ class="object-cover w-full h-full rounded-full"
	1989	+ src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
	1990	+ alt=""
	1991	+ loading="lazy"
	1992	+ />
	1993	+ <div
	1994	+ class="absolute inset-0 rounded-full shadow-inner"
	1995	+ aria-hidden="true"
	1996	+ ></div>
	1997	+ </div>
	1998	+ <div>
	1999	+ <p class="font-semibold">Hans Burger</p>
	2000	+ <p class="text-xs text-gray-600 dark:text-gray-400">
	2001	+ 10x Developer
	2002	+ </p>
	2003	+ </div>
	2004	+ </div>
	2005	+ </td>
	2006	+ <td class="px-4 py-3 text-sm">
	2007	+ $ 863.45
	2008	+ </td>
	2009	+ <td class="px-4 py-3 text-xs">
	2010	+ <span
	2011	+ class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
	2012	+ >
	2013	+ Approved
	2014	+ </span>
	2015	+ </td>
	2016	+ <td class="px-4 py-3 text-sm">
	2017	+ 6/10/2020
	2018	+ </td>
	2019	+ <td class="px-4 py-3">
	2020	+ <div class="flex items-center space-x-4 text-sm">
	2021	+ <button
	2022	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	2023	+ aria-label="Edit"
	2024	+ >
	2025	+ <svg
	2026	+ class="w-5 h-5"
	2027	+ aria-hidden="true"
	2028	+ fill="currentColor"
	2029	+ viewBox="0 0 20 20"
	2030	+ >
	2031	+ <path
	2032	+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
	2033	+ ></path>
	2034	+ </svg>
	2035	+ </button>
	2036	+ <button
	2037	+ class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
	2038	+ aria-label="Delete"
	2039	+ >
	2040	+ <svg
	2041	+ class="w-5 h-5"
	2042	+ aria-hidden="true"
	2043	+ fill="currentColor"
	2044	+ viewBox="0 0 20 20"
	2045	+ >
	2046	+ <path
	2047	+ fill-rule="evenodd"
	2048	+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
	2049	+ clip-rule="evenodd"
	2050	+ ></path>
	2051	+ </svg>
	2052	+ </button>
	2053	+ </div>
	2054	+ </td>
	2055	+ </tr>
	2056	+ </tbody>
	2057	+ </table>
	2058	+ </div>
	2059	+ <div
	2060	+ class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800"
	2061	+ >
	2062	+ <span class="flex items-center col-span-3">
	2063	+ Showing 21-30 of 100
	2064	+ </span>
	2065	+ <span class="col-span-2"></span>
	2066	+ <!-- Pagination -->
	2067	+ <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
	2068	+ <nav aria-label="Table navigation">
	2069	+ <ul class="inline-flex items-center">
	2070	+ <li>
	2071	+ <button
	2072	+ class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
	2073	+ aria-label="Previous"
	2074	+ >
	2075	+ <svg
	2076	+ class="w-4 h-4 fill-current"
	2077	+ aria-hidden="true"
	2078	+ viewBox="0 0 20 20"
	2079	+ >
	2080	+ <path
	2081	+ 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"
	2082	+ clip-rule="evenodd"
	2083	+ fill-rule="evenodd"
	2084	+ ></path>
	2085	+ </svg>
	2086	+ </button>
	2087	+ </li>
	2088	+ <li>
	2089	+ <button
	2090	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	2091	+ >
	2092	+ 1
	2093	+ </button>
	2094	+ </li>
	2095	+ <li>
	2096	+ <button
	2097	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	2098	+ >
	2099	+ 2
	2100	+ </button>
	2101	+ </li>
	2102	+ <li>
	2103	+ <button
	2104	+ class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple"
	2105	+ >
	2106	+ 3
	2107	+ </button>
	2108	+ </li>
	2109	+ <li>
	2110	+ <button
	2111	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	2112	+ >
	2113	+ 4
	2114	+ </button>
	2115	+ </li>
	2116	+ <li>
	2117	+ <span class="px-3 py-1">...</span>
	2118	+ </li>
	2119	+ <li>
	2120	+ <button
	2121	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	2122	+ >
	2123	+ 8
	2124	+ </button>
	2125	+ </li>
	2126	+ <li>
	2127	+ <button
	2128	+ class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
	2129	+ >
	2130	+ 9
	2131	+ </button>
	2132	+ </li>
	2133	+ <li>
	2134	+ <button
	2135	+ class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
	2136	+ aria-label="Next"
	2137	+ >
	2138	+ <svg
	2139	+ class="w-4 h-4 fill-current"
	2140	+ aria-hidden="true"
	2141	+ viewBox="0 0 20 20"
	2142	+ >
	2143	+ <path
	2144	+ 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"
	2145	+ clip-rule="evenodd"
	2146	+ fill-rule="evenodd"
	2147	+ ></path>
	2148	+ </svg>
	2149	+ </button>
	2150	+ </li>
	2151	+ </ul>
	2152	+ </nav>
	2153	+ </span>
	2154	+ </div>
	2155	+ </div>
	2156	+ </div>
	2157	+ </main>
	2158	+ </div>
	2159	+ </div>
	2160	+ </body>
	2161	+</html>

resources/views/admin/groups/form.blade.php

Diff comments   View file @ 5f2a263

...	...	@@ -44,7 +44,7 @@
44	44	{{$user->name}}
45	45	</td>
46	46	<td class="px-4 py-3">
47		- <input type="checkbox" id="user{{$user->id}}" name="usergroup[]" value="{{$user->id}}" <?php //if ($user->groups->group_user_id == $group->id) {?>checked<?//}?>/>
	47	+ <input type="checkbox" id="user{{$user->id}}" name="usergroup[]" value="{{$user->id}}" <?php if ($user->ingroup->contains('id', $group->id)) {?>checked<? }?>/>
48	48	<pre><? //print_r($user->ingroup->id);?></pre>
49	49	</td>
50	50	</tr>

resources/views/admin/index.blade.php

Diff comments   View file @ 5f2a263

...	...	@@ -241,7 +241,7 @@
241	241	<div class="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
242	242	</div>
243	243	<div>
244		- <p class="font-semibold"><a href="{{ route('admin.job-titles') }}">Должности</a></p>
	244	+ <p class="font-semibold"><a href="{{ route('admin.job-titles.index') }}">Должности</a></p>
245	245	<p class="text-xs text-gray-600 dark:text-gray-400">
246	246	Справочник должности (все должности проекта)
247	247	</p>

resources/views/admin/job_titles/add.blade.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,11 @@
	1	+@extends('layout.admin', ['title' => 'Админка - Добавление новой должности'])
	2	+
	3	+@section('content')
	4	+ <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
	5	+ Добавление новой должности
	6	+ </h4>
	7	+ <form method="POST" action="{{ route('admin.job-titles.store') }}">
	8	+ @csrf
	9	+ @include('admin.job_titles.form')
	10	+ </form>
	11	+@endsection

resources/views/admin/job_titles/edit.blade.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,15 @@
	1	+@extends('layout.admin', ['title' => 'Админка - Редактирование должности'])
	2	+
	3	+@section('content')
	4	+ <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
	5	+ Редактирование должности
	6	+ </h4>
	7	+ <form method="POST" action="{{ route('admin.job-titles.update', ['job_title' => $job_title->id]) }}">
	8	+ @csrf
	9	+ @isset($job_title)
	10	+ @method('PUT')
	11	+ @endisset
	12	+
	13	+ @include('admin.job_titles.form')
	14	+ </form>
	15	+@endsection

resources/views/admin/job_titles/form.blade.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,35 @@
	1	+<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
	2	+ <label class="block text-sm">
	3	+ <span class="text-gray-700 dark:text-gray-400">Название должности</span>
	4	+ <input name="name" id="name"
	5	+ class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
	6	+ placeholder="Название должности" value="{{ old('name') ?? $job_title->name ?? '' }}"
	7	+ />
	8	+ @error('name')
	9	+ <span class="text-xs text-red-600 dark:text-red-400">
	10	+ {{ $message }}
	11	+ </span>
	12	+ @enderror
	13	+ </label><br>
	14	+
	15	+ <label class="block text-sm">
	16	+ <span class="text-gray-700 dark:text-gray-400">Родитель</span>
	17	+
	18	+ @php
	19	+ $parent_id = old('parent_id') ?? $job_title->parent_id ?? 0;
	20	+ @endphp
	21	+ <select name="parent_id" class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
	22	+ title="Родитель">
	23	+ <option value="0">Без родителя</option>
	24	+ @include('admin.job_titles.parent_id', ['level' => -1, 'parent' => 0])
	25	+ </select>
	26	+ </label><br>
	27	+
	28	+ <div class="flex flex-col flex-wrap mb-4 space-y-4 md:flex-row md:items-end md:space-x-4">
	29	+ <div>
	30	+ <button type="submit" class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
	31	+ Сохранить
	32	+ </button>
	33	+ </div>
	34	+ </div>
	35	+</div>

resources/views/admin/job_titles/index.blade.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,88 @@
	1	+@extends('layout.admin', ['title' => 'Админка - Справочник Должности'])
	2	+
	3	+@section('script')
	4	+@endsection
	5	+
	6	+@section('search')
	7	+ <!--<div class="absolute inset-y-0 flex items-center pl-2">
	8	+ <svg
	9	+ class="w-4 h-4"
	10	+ aria-hidden="true"
	11	+ fill="currentColor"
	12	+ viewBox="0 0 20 20"
	13	+ >
	14	+ <path
	15	+ fill-rule="evenodd"
	16	+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
	17	+ clip-rule="evenodd"
	18	+ ></path>
	19	+ </svg>
	20	+ </div>
	21	+ <form action="" method="POST">
	22	+ <div style="float:left;"><input
	23	+ class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
	24	+ style="width: 400px"
	25	+ type="text"
	26	+ placeholder="Искать..."
	27	+ aria-label="Search"
	28	+ /></div>
	29	+ <div style="float: left">
	30	+ <button type="submit" class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">Искать</button>
	31	+ </div>
	32	+ </form>-->
	33	+@endsection
	34	+
	35	+@section('content')
	36	+ <div class="w-full overflow-hidden rounded-lg shadow-xs" id="ajax_block">
	37	+ <div class="w-full overflow-x-auto">
	38	+ <a class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" href="{{ route('admin.job-titles.create') }}">Создать должность</a><br><br>
	39	+ <table class="w-full whitespace-no-wrap">
	40	+ <thead>
	41	+ <tr
	42	+ class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
	43	+ >
	44	+ <th class="px-4 py-3">№</th>
	45	+ <th class="px-4 py-3">Родитель</th>
	46	+ <th class="px-4 py-3">Должность</th>
	47	+ <th class="px-4 py-3">Дата создания</th>
	48	+ <th class="px-4 py-3">Изменить</th>
	49	+ </tr>
	50	+ </thead>
	51	+ <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
	52	+ @foreach($Jobs as $job)
	53	+ <tr class="text-gray-700 dark:text-gray-400">
	54	+ <td class="px-4 py-3">
	55	+ {{$job->id}}
	56	+ </td>
	57	+ <td class="px-4 py-3">
	58	+ @if (empty($job->parent->id))
	59	+ Не задан
	60	+ @else
	61	+ {{$job->parent->name}} ({{$job->parent->id}})
	62	+ @endif
	63	+ </td>
	64	+ <td class="px-4 py-3">
	65	+ {{$job->name}}
	66	+ </td>
	67	+ <td class="px-4 py-3 text-sm">
	68	+ {{ $job->created_at }}
	69	+ </td>
	70	+ <td class="px-4 py-3 text-sm_">
	71	+ <form action="{{ route('admin.job-titles.destroy', ['job_title' => $job->id]) }}" method="POST">
	72	+ <a href="{{ route('admin.job-titles.edit', ['job_title' => $job->id]) }}">Изменить</a> |
	73	+ @csrf
	74	+ @method('DELETE')
	75	+ <input class="btn btn-danger" type="submit" value="Удалить"/>
	76	+ </form>
	77	+ </td>
	78	+ </tr>
	79	+ @endforeach
	80	+ </tbody>
	81	+ </table>
	82	+ </div>
	83	+
	84	+ <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
	85	+ <?=$Jobs->appends($_GET)->links('admin.pagginate'); ?>
	86	+ </div>
	87	+ </div>
	88	+@endsection

resources/views/admin/job_titles/parent_id.blade.php

Diff comments   View file @ 5f2a263

...	...	@@ -0,0 +1,10 @@
	1	+@if ($items->where('parent_id', $parent)->count())
	2	+ @php $level++ @endphp
	3	+ @foreach ($items->where('parent_id', $parent) as $item)
	4	+ <option value="{{ $item->id }}" @if ($item->id == $parent_id) selected @endif>
	5	+ @if ($level) {!! str_repeat('&nbsp;&nbsp;&nbsp;', $level) !!} @endif
	6	+ {{ $item->name }}
	7	+ </option>
	8	+ @include('admin.job_titles.parent_id', ['level' => $level, 'parent' => $item->id])
	9	+ @endforeach
	10	+@endif

resources/views/layout/admin.blade.php

Diff comments   View file @ 5f2a263

...	...	@@ -302,7 +302,7 @@
302	302	aria-label="submenu"
303	303	>
304	304	<li class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200">
305		- <a class="w-full" href="{{ route('admin.job-titles') }}">Должности</a>
	305	+ <a class="w-full" href="{{ route('admin.job-titles.index') }}">Должности</a>
306	306	</li>
307	307	<li class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200">
308	308	<a class="w-full" href="{{ route('admin.categories.index') }}">Категории</a>
...	...	@@ -695,7 +695,7 @@
695	695	aria-label="submenu"
696	696	>
697	697	<li class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200">
698		- <a class="w-full" href="{{ route('admin.job-titles') }}">Должности</a>
	698	+ <a class="w-full" href="{{ route('admin.job-titles.index') }}">Должности</a>
699	699	</li>
700	700	<li class="px-2 py-1 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200">
701	701	<a class="w-full" href="{{ route('admin.categories.index') }}">Категории</a>

routes/web.php

Diff comments   View file @ 5f2a263

...	...	@@ -3,6 +3,7 @@
3	3	use App\Http\Controllers\Admin\AdminController;
4	4	use App\Http\Controllers\Admin\CategoryController;
5	5	use App\Http\Controllers\Admin\EmployersController;
	6	+use App\Http\Controllers\Admin\JobTitlesController;
6	7	use App\Http\Controllers\Admin\UsersController;
7	8	use App\Http\Controllers\Admin\WorkersController;
8	9	use App\Http\Controllers\Auth\LoginController;
...	...	@@ -128,17 +129,24 @@ Route::group([
128	129	// кабинет - категории
129	130	//Route::get('categories', [AdminController::class, 'index'])->name('categories');
130	131	/*
131		- * CRUD-операции над настройками Компании
132		- */
	132	+ * CRUD-операции над Справочником Категории
	133	+ */
133	134	Route::resource('categories', CategoryController::class, ['except' => ['show']]);
134	135
135	136
136		- // кабинет - должности
137		- Route::get('job-titles', [AdminController::class, 'index'])->name('job-titles');
	137	+ //Route::get('job-titles', [AdminController::class, 'index'])->name('job-titles');
	138	+ /*
	139	+ * кабинет - CRUD-операции по справочнику должности
	140	+ *
	141	+ */
	142	+ Route::resource('job-titles', JobTitlesController::class, ['except' => ['show']]);
138	143
139	144	// кабинет - сообщения
140	145	Route::get('messages', [MsgAnswersController::class, 'messages'])->name('messages');
141	146
	147	+ /*
	148	+ * Расписанный подход в описании каждой директорий групп пользователей.
	149	+ */
142	150	// кабинет - группы пользователей
143	151	Route::get('groups', [GroupsController::class, 'index'])->name('groups');
144	152	// кабинет - добавление форма группы пользователей