wg-ocp-frontend notus-svelte
This commit is contained in:
infidel
BIN
src/components/Cards/.CardCreateWGUser.svelte.swp
Normal file
BIN
src/components/Cards/.CardCreateWGUser.svelte.swp
Normal file
Binary file not shown.
BIN
src/components/Cards/.CardSettings.svelte.swp
Normal file
BIN
src/components/Cards/.CardSettings.svelte.swp
Normal file
Binary file not shown.
BIN
src/components/Cards/.CardWGControl.svelte.swp
Normal file
BIN
src/components/Cards/.CardWGControl.svelte.swp
Normal file
Binary file not shown.
BIN
src/components/Cards/.CardWGProfiles.svelte.swp
Normal file
BIN
src/components/Cards/.CardWGProfiles.svelte.swp
Normal file
Binary file not shown.
125
src/components/Cards/CardBarChart.svelte
Normal file
125
src/components/Cards/CardBarChart.svelte
Normal file
@@ -0,0 +1,125 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
// library that creates chart objects in page
|
||||
import Chart from "chart.js";
|
||||
|
||||
// init chart
|
||||
onMount(async () => {
|
||||
let config = {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: new Date().getFullYear(),
|
||||
backgroundColor: "#ed64a6",
|
||||
borderColor: "#ed64a6",
|
||||
data: [30, 78, 56, 34, 100, 45, 13],
|
||||
fill: false,
|
||||
barThickness: 8
|
||||
},
|
||||
{
|
||||
label: new Date().getFullYear() - 1,
|
||||
fill: false,
|
||||
backgroundColor: "#4c51bf",
|
||||
borderColor: "#4c51bf",
|
||||
data: [27, 68, 86, 74, 10, 4, 87],
|
||||
barThickness: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
title: {
|
||||
display: false,
|
||||
text: "Orders Chart",
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: "nearest",
|
||||
intersect: true,
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: "rgba(0,0,0,.4)",
|
||||
},
|
||||
align: "end",
|
||||
position: "bottom",
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Month",
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [2],
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2],
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Value",
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [2],
|
||||
drawBorder: false,
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.2)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0.15)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
let ctx = document.getElementById("bar-chart").getContext("2d");
|
||||
window.myBar = new Chart(ctx, config);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full max-w-full flex-grow flex-1">
|
||||
<h6 class="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
|
||||
Performance
|
||||
</h6>
|
||||
<h2 class="text-blueGray-700 text-xl font-semibold">
|
||||
Total orders
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex-auto">
|
||||
<div class="relative h-350-px">
|
||||
<canvas id="bar-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
111
src/components/Cards/CardCreateWGUser.svelte
Normal file
111
src/components/Cards/CardCreateWGUser.svelte
Normal file
@@ -0,0 +1,111 @@
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
>
|
||||
<div class="rounded-t bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="text-blueGray-700 text-xl font-bold">My account</h6>
|
||||
<button
|
||||
class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<form>
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
User Information
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-username"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="grid-username"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="lucky.jesse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-email"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
id="grid-email"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="jesse@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-address"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-address"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-address"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
Contact Information
|
||||
</h6>
|
||||
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
About Me
|
||||
</h6>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
134
src/components/Cards/CardLineChart.svelte
Normal file
134
src/components/Cards/CardLineChart.svelte
Normal file
@@ -0,0 +1,134 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
// library that creates chart objects in page
|
||||
import Chart from "chart.js";
|
||||
|
||||
// init chart
|
||||
onMount(async () => {
|
||||
var config = {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: new Date().getFullYear(),
|
||||
backgroundColor: "#4c51bf",
|
||||
borderColor: "#4c51bf",
|
||||
data: [65, 78, 66, 44, 56, 67, 75],
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: new Date().getFullYear() - 1,
|
||||
fill: false,
|
||||
backgroundColor: "#fff",
|
||||
borderColor: "#fff",
|
||||
data: [40, 68, 86, 74, 56, 60, 87]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
title: {
|
||||
display: false,
|
||||
text: "Sales Charts",
|
||||
fontColor: "white",
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: "white",
|
||||
},
|
||||
align: "end",
|
||||
position: "bottom",
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: "nearest",
|
||||
intersect: true,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontColor: "rgba(255,255,255,.7)",
|
||||
},
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Month",
|
||||
fontColor: "white",
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
borderDash: [2],
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineColor: "rgba(0, 0, 0, 0)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2],
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontColor: "rgba(255,255,255,.7)",
|
||||
},
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Value",
|
||||
fontColor: "white",
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [3],
|
||||
borderDashOffset: [3],
|
||||
drawBorder: false,
|
||||
color: "rgba(255, 255, 255, 0.15)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
var ctx = document.getElementById("line-chart").getContext("2d");
|
||||
window.myLine = new Chart(ctx, config);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full max-w-full flex-grow flex-1">
|
||||
<h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
|
||||
Overview
|
||||
</h6>
|
||||
<h2 class="text-white text-xl font-semibold">
|
||||
Sales value
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex-auto">
|
||||
<!-- Chart -->
|
||||
<div class="relative h-350-px">
|
||||
<canvas id="line-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
167
src/components/Cards/CardPageVisits.svelte
Normal file
167
src/components/Cards/CardPageVisits.svelte
Normal file
@@ -0,0 +1,167 @@
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3 class="font-semibold text-base text-blueGray-700">
|
||||
Page visits
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
|
||||
<button
|
||||
class="bg-indigo-500 text-white active:bg-indigo-600 text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
See all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="items-center w-full bg-transparent border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Page name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Visitors
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Unique users
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Bounce rate
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
4,569
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
340
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
|
||||
46,53%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/index.html
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
3,985
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
319
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-down text-orange-500 mr-4"></i>
|
||||
46,53%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/charts.html
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
3,513
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
294
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-down text-orange-500 mr-4"></i>
|
||||
36,49%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/tables.html
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
2,050
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
147
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
|
||||
50,87%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/profile.html
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
1,795
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
190
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-down text-red-500 mr-4"></i>
|
||||
46,53%
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
84
src/components/Cards/CardProfile.svelte
Normal file
84
src/components/Cards/CardProfile.svelte
Normal file
@@ -0,0 +1,84 @@
|
||||
<script>
|
||||
// core components
|
||||
const team2 = "../assets/img/team-2-800x800.jpg";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg mt-16"
|
||||
>
|
||||
<div class="px-6">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full px-4 flex justify-center">
|
||||
<div class="relative">
|
||||
<img
|
||||
alt="..."
|
||||
src="{team2}"
|
||||
class="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full px-4 text-center mt-20">
|
||||
<div class="flex justify-center py-4 lg:pt-4 pt-8">
|
||||
<div class="mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
22
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Friends</span>
|
||||
</div>
|
||||
<div class="mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
10
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Photos</span>
|
||||
</div>
|
||||
<div class="lg:mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
89
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Comments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-12">
|
||||
<h3 class="text-xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">
|
||||
Jenna Stones
|
||||
</h3>
|
||||
<div
|
||||
class="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase"
|
||||
>
|
||||
<i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>
|
||||
Los Angeles, California
|
||||
</div>
|
||||
<div class="mb-2 text-blueGray-600 mt-10">
|
||||
<i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
|
||||
Solution Manager - Creative Tim Officer
|
||||
</div>
|
||||
<div class="mb-2 text-blueGray-600">
|
||||
<i class="fas fa-university mr-2 text-lg text-blueGray-400"></i>
|
||||
University of Computer Science
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 py-10 border-t border-blueGray-200 text-center">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full lg:w-9/12 px-4">
|
||||
<p class="mb-4 text-lg leading-relaxed text-blueGray-700">
|
||||
An artist of considerable range, Jenna the name taken by
|
||||
Melbourne-raised, Brooklyn-based Nick Murphy writes, performs and
|
||||
records all of his own music, giving it a warm, intimate feel with a
|
||||
solid groove structure. An artist of considerable range.
|
||||
</p>
|
||||
<a href="#pablo" on:click={(e) => e.preventDefault()} class="font-normal text-red-500">
|
||||
Show more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
186
src/components/Cards/CardSettings.svelte
Normal file
186
src/components/Cards/CardSettings.svelte
Normal file
@@ -0,0 +1,186 @@
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
>
|
||||
<div class="rounded-t bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="text-blueGray-700 text-xl font-bold">My account</h6>
|
||||
<button
|
||||
class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<form>
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
User Information
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-username"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="grid-username"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="lucky.jesse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-email"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
id="grid-email"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="jesse@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-first-name"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Lucky"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-last-name"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
id="grid-last-name"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Jesse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
Contact Information
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-12/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-address"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-city"
|
||||
>
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
id="grid-city"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="New York"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-country"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<input
|
||||
id="grid-country"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="United States"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-postal-code"
|
||||
>
|
||||
Postal Code
|
||||
</label>
|
||||
<input
|
||||
id="grid-postal-code"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Postal Code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
About Me
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-12/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-about-me"
|
||||
>
|
||||
About me
|
||||
</label>
|
||||
<textarea
|
||||
id="grid-about-me"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
rows="4"
|
||||
value="A beautiful UI Kit and Admin for Svelte & Tailwind CSS. It is Free
|
||||
and Open Source."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
190
src/components/Cards/CardSocialTraffic.svelte
Normal file
190
src/components/Cards/CardSocialTraffic.svelte
Normal file
@@ -0,0 +1,190 @@
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3 class="font-semibold text-base text-blueGray-700">
|
||||
Social traffic
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
|
||||
<button
|
||||
class="bg-indigo-500 text-white active:bg-indigo-600 text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
See all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="items-center w-full bg-transparent border-collapse">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Referral
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Visitors
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
Facebook
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
1,480
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">60%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
|
||||
>
|
||||
<div
|
||||
style="width: 60%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
Facebook
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
5,480
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">70%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
|
||||
>
|
||||
<div
|
||||
style="width: 70%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
Google
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
4,807
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">80%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-purple-200"
|
||||
>
|
||||
<div
|
||||
style="width: 80%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
Instagram
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
3,678
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">75%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-lightBlue-200"
|
||||
>
|
||||
<div
|
||||
style="width: 75%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
twitter
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
2,645
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">30%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-orange-200"
|
||||
>
|
||||
<div
|
||||
style="width: 30%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
44
src/components/Cards/CardSpinner.svelte
Normal file
44
src/components/Cards/CardSpinner.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<script>
|
||||
// core components
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
const bootstrap = "../assets/img/bootstrap.jpg";
|
||||
const angular = "../assets/img/angular.jpg";
|
||||
const sketch = "../assets/img/sketch.jpg";
|
||||
const react = "../assets/img/react.jpg";
|
||||
const vue = "../assets/img/react.jpg";
|
||||
|
||||
const team1 = "../assets/img/team-1-800x800.jpg";
|
||||
const team2 = "../assets/img/team-2-800x800.jpg";
|
||||
const team3 = "../assets/img/team-3-800x800.jpg";
|
||||
const team4 = "../assets/img/team-4-470x470.png";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
Card Tables
|
||||
</h3>
|
||||
<div>
|
||||
<button
|
||||
class="bg-red-500 active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
|
||||
<!-- ... -->
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
51
src/components/Cards/CardStats.svelte
Normal file
51
src/components/Cards/CardStats.svelte
Normal file
@@ -0,0 +1,51 @@
|
||||
<script>
|
||||
// core components
|
||||
|
||||
export let statSubtitle = "...";
|
||||
export let statTitle = "...";
|
||||
// The value must match one of these strings
|
||||
// "up" or "down"
|
||||
export let statArrow = "...";
|
||||
export let statPercent = "...";
|
||||
// can be any of the text color utilities
|
||||
// from tailwindcss
|
||||
export let statPercentColor = "text-emerald-500";
|
||||
export let statDescripiron = "Since last month";
|
||||
export let statIconName = "far fa-chart-bar";
|
||||
// can be any of the background color utilities
|
||||
// from tailwindcss
|
||||
export let statIconColor = "bg-red-500";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg"
|
||||
>
|
||||
<div class="flex-auto p-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="relative w-full pr-4 max-w-full flex-grow flex-1">
|
||||
<h5 class="text-blueGray-400 uppercase font-bold text-xs">
|
||||
{statSubtitle}
|
||||
</h5>
|
||||
<span class="font-semibold text-xl text-blueGray-700">
|
||||
{statTitle}
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative w-auto pl-4 flex-initial">
|
||||
<div
|
||||
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full {statIconColor}"
|
||||
>
|
||||
<i class="{statIconName}"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-blueGray-400 mt-4">
|
||||
<span class="mr-2 {statPercentColor}">
|
||||
<i
|
||||
class="{statArrow === 'up' ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"
|
||||
></i>
|
||||
{statPercent}%
|
||||
</span>
|
||||
<span class="whitespace-nowrap">{statDescripiron}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
445
src/components/Cards/CardTable.svelte
Normal file
445
src/components/Cards/CardTable.svelte
Normal file
@@ -0,0 +1,445 @@
|
||||
<script>
|
||||
// core components
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
const bootstrap = "../assets/img/bootstrap.jpg";
|
||||
const angular = "../assets/img/angular.jpg";
|
||||
const sketch = "../assets/img/sketch.jpg";
|
||||
const react = "../assets/img/react.jpg";
|
||||
const vue = "../assets/img/react.jpg";
|
||||
|
||||
const team1 = "../assets/img/team-1-800x800.jpg";
|
||||
const team2 = "../assets/img/team-2-800x800.jpg";
|
||||
const team3 = "../assets/img/team-3-800x800.jpg";
|
||||
const team4 = "../assets/img/team-4-470x470.png";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
Card Tables
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="items-center w-full bg-transparent border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Project
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Budget
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Users
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Completion
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{bootstrap}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
Argon Design System
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$2,500 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-orange-500 mr-2"></i> pending
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">60%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
|
||||
>
|
||||
<div
|
||||
style="width: 60%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{angular}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
Angular Now UI Kit PRO
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$1,800 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-emerald-500 mr-2"></i>
|
||||
completed
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">100%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
|
||||
>
|
||||
<div
|
||||
style="width: 100%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{sketch}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
Black Dashboard Sketch
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$3,150 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-red-500 mr-2"></i> delayed
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">73%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
|
||||
>
|
||||
<div
|
||||
style="width: 73%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{react}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
React Material Dashboard
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$4,400 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-teal-500 mr-2"></i> on schedule
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">90%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-teal-200"
|
||||
>
|
||||
<div
|
||||
style="width: 90%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{vue}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
React Material Dashboard
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$2,200 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-emerald-500 mr-2"></i>
|
||||
completed
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">100%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
|
||||
>
|
||||
<div
|
||||
style="width: 100%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
143
src/components/Cards/CardTableInf.svelte
Normal file
143
src/components/Cards/CardTableInf.svelte
Normal file
@@ -0,0 +1,143 @@
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import { onMount } from 'svelte';
|
||||
let trColor;
|
||||
let footprint;
|
||||
let infTable = [];
|
||||
onMount(async () => {
|
||||
await axios.get('/api2/wgLogs')
|
||||
.then( response => {
|
||||
infTable = response.data
|
||||
});
|
||||
console.log(infTable);
|
||||
});
|
||||
|
||||
// core components
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
|
||||
function handleMouseOver(e) {
|
||||
trColor = "light";
|
||||
}
|
||||
|
||||
function handleMouseOut(e) {
|
||||
trColor = "dark";
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
Accesss Logs
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="table-auto items-center w-full bg-transparent border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Mail
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Public Key
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Data In
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Data Out
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Status
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Create Time
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
...
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each infTable as infRows}
|
||||
<tr class="{infRows.wgDin < 1 ? 'bg-red-700 border-red-600 text-red-200' : 'None'} ">
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgName }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgMail }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgKey }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgDin/1000000 } MBytes
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgDout/1000000 } MBytes
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgStatus }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgTStamp }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
84
src/components/Cards/CardWGControl.svelte
Normal file
84
src/components/Cards/CardWGControl.svelte
Normal file
@@ -0,0 +1,84 @@
|
||||
<script>
|
||||
|
||||
import CardSettings from "components/Cards/CardSettings.svelte";
|
||||
import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
|
||||
import Modal from "components/Modals/Modals.svelte"
|
||||
|
||||
let showModal = false;
|
||||
|
||||
function toggleModal(){
|
||||
showModal = !showModal;
|
||||
console.log("Cunts...");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
Contact Information
|
||||
</h6>
|
||||
<div class="text-center flex justify">
|
||||
<div></div>
|
||||
<div>
|
||||
<button
|
||||
class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
on:click="{toggleModal}"
|
||||
>
|
||||
Create Profile
|
||||
</button>
|
||||
<button
|
||||
class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Apply to System
|
||||
</button>
|
||||
<button
|
||||
class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showModal}
|
||||
<div class="modal z-50 fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none">
|
||||
<div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
|
||||
<div class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
|
||||
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalCenteredScrollableLabel">
|
||||
Modal title
|
||||
</h5>
|
||||
<button type="button"
|
||||
class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
|
||||
data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body relative p-4">
|
||||
<p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
<p>Just like that.</p>
|
||||
</div>
|
||||
<div
|
||||
class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
|
||||
<button type="button"
|
||||
class="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
|
||||
data-bs-dismiss="modal">
|
||||
Close
|
||||
</button>
|
||||
<button type="button"
|
||||
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
136
src/components/Cards/CardWGProfiles.svelte
Normal file
136
src/components/Cards/CardWGProfiles.svelte
Normal file
@@ -0,0 +1,136 @@
|
||||
<script>
|
||||
// import axios from 'axios';
|
||||
// import {onMount} from 'svelte';
|
||||
let footprint;
|
||||
export let wgProfileData = [];
|
||||
// onMount(async () => {
|
||||
// await axios.get('http://127.0.0.1:8000/api2/wgClients')
|
||||
// .then( response => {
|
||||
// wgProfileData = response.data
|
||||
// });
|
||||
// console.log(wgProfileData);
|
||||
// });
|
||||
|
||||
// core components
|
||||
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
User Profiles
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="w-full striped hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
#
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Mail
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Assigned IP
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Allowed IP
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Created Time
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each wgProfileData as infRows}
|
||||
<tr>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.data_id }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.name }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.email }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.allocated_ips }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.allowed_ips }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.enabled }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.updated_at }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
112
src/components/Dropdowns/IndexDropdown.svelte
Normal file
112
src/components/Dropdowns/IndexDropdown.svelte
Normal file
@@ -0,0 +1,112 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
Demo Pages
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
Admin Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/dashboard"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/settings"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/tables"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Tables
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/maps"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Maps
|
||||
</a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
Auth Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/auth/login"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/auth/register"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
No Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/landing"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Landing
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/profile"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
64
src/components/Dropdowns/NotificationDropdown.svelte
Normal file
64
src/components/Dropdowns/NotificationDropdown.svelte
Normal file
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="text-blueGray-500 block py-1 px-3"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
<i class="fas fa-bell"></i>
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Action
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Another action
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Something else here
|
||||
</a>
|
||||
<div class="h-0 my-2 border border-solid border-blueGray-100" />
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Seprated link
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
113
src/components/Dropdowns/PagesDropdown.svelte
Normal file
113
src/components/Dropdowns/PagesDropdown.svelte
Normal file
@@ -0,0 +1,113 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
Demo Pages
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
Admin Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/dashboard"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/settings"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/tables"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Tables
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/maps"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Maps
|
||||
</a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
Auth Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/auth/login"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/auth/register"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
No Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/landing"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Landing
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/profile"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
57
src/components/Dropdowns/TableDropdown.svelte
Normal file
57
src/components/Dropdowns/TableDropdown.svelte
Normal file
@@ -0,0 +1,57 @@
|
||||
<script>
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="text-blueGray-500 py-1 px-3"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Show Detail
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
76
src/components/Dropdowns/UserDropdown.svelte
Normal file
76
src/components/Dropdowns/UserDropdown.svelte
Normal file
@@ -0,0 +1,76 @@
|
||||
<script>
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
|
||||
const image = "../assets/img/team-1-800x800.jpg";
|
||||
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="text-blueGray-500 block"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
<div class="items-center flex">
|
||||
<span
|
||||
class="w-12 h-12 text-sm text-white bg-blueGray-200 inline-flex items-center justify-center rounded-full"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="w-full rounded-full align-middle border-none shadow-lg"
|
||||
src="{image}"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Action
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Another action
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Something else here
|
||||
</a>
|
||||
<div class="h-0 my-2 border border-solid border-blueGray-100" />
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Seprated link
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
163
src/components/Footers/Footer.svelte
Normal file
163
src/components/Footers/Footer.svelte
Normal file
@@ -0,0 +1,163 @@
|
||||
<script>
|
||||
// make dynamic date to be added to footer
|
||||
let date = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<footer class="relative bg-blueGray-200 pt-8 pb-6">
|
||||
<div
|
||||
class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
|
||||
style="transform: translateZ(0);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-blueGray-200 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap text-center lg:text-left">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<h4 class="text-3xl font-semibold">Let's keep in touch!</h4>
|
||||
<h5 class="text-lg mt-0 mb-2 text-blueGray-600">
|
||||
Find us on any of these platforms, we respond 1-2 business days.
|
||||
</h5>
|
||||
<div class="mt-6 lg:mb-0 mb-6">
|
||||
<button
|
||||
class="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-twitter"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-github"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="flex flex-wrap items-top mb-6">
|
||||
<div class="w-full lg:w-4/12 px-4 ml-auto">
|
||||
<span
|
||||
class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
|
||||
>
|
||||
Useful Links
|
||||
</span>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://www.creative-tim.com/presentation?ref=ns-footer"
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://blog.creative-tim.com?ref=ns-footer"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://www.github.com/creativetimofficial?ref=ns-footer"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://www.creative-tim.com/bootstrap-themes/free?ref=ns-footer"
|
||||
>
|
||||
Free Products
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<span
|
||||
class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
|
||||
>
|
||||
Other Resources
|
||||
</span>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://github.com/creativetimofficial/notus-svelte/blob/main/LICENSE.md?ref=ns-footer"
|
||||
>
|
||||
MIT License
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/terms?ref=ns-footer"
|
||||
>
|
||||
Terms & Conditions
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/privacy?ref=ns-footer"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/contact-us?ref=ns-footer"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-6 border-blueGray-300" />
|
||||
<div class="flex flex-wrap items-center md:justify-between justify-center">
|
||||
<div class="w-full md:w-4/12 px-4 mx-auto text-center">
|
||||
<div class="text-sm text-blueGray-500 font-semibold py-1">
|
||||
Copyright © {date} Notus Svelte by
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer"
|
||||
class="text-blueGray-500 hover:text-blueGray-800"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
61
src/components/Footers/FooterAdmin.svelte
Normal file
61
src/components/Footers/FooterAdmin.svelte
Normal file
@@ -0,0 +1,61 @@
|
||||
<script>
|
||||
// make dynamic date to be added to footer
|
||||
let date = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<footer class="block py-4">
|
||||
<div class="container mx-auto px-4">
|
||||
<hr class="mb-4 border-b-1 border-blueGray-200" />
|
||||
<div class="flex flex-wrap items-center md:justify-between justify-center">
|
||||
<div class="w-full md:w-4/12 px-4">
|
||||
<div
|
||||
class="text-sm text-blueGray-500 font-semibold py-1 text-center md:text-left"
|
||||
>
|
||||
Copyright © {date}
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer-admin"
|
||||
class="text-blueGray-500 hover:text-blueGray-700 text-sm font-semibold py-1"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-8/12 px-4">
|
||||
<ul class="flex flex-wrap list-none md:justify-end justify-center">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer-admin"
|
||||
class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.creative-tim.com/presentation?ref=ns-footer-admin"
|
||||
class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://blog.creative-tim.com?ref=ns-footer-admin"
|
||||
class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/creativetimofficial/notus-svelte/blob/main/LICENSE.md?ref=ns-footer-admin"
|
||||
class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
MIT License
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
65
src/components/Footers/FooterSmall.svelte
Normal file
65
src/components/Footers/FooterSmall.svelte
Normal file
@@ -0,0 +1,65 @@
|
||||
<script>
|
||||
// make dynamic date to be added to footer
|
||||
let date = new Date().getFullYear();
|
||||
|
||||
export let absolute = false;
|
||||
</script>
|
||||
|
||||
<footer
|
||||
class="pb-6 {absolute ? 'absolute w-full bottom-0 bg-blueGray-800' : 'relative'}"
|
||||
>
|
||||
<div class="container mx-auto px-4">
|
||||
<hr class="mb-6 border-b-1 border-blueGray-600" />
|
||||
<div class="flex flex-wrap items-center md:justify-between justify-center">
|
||||
<div class="w-full md:w-4/12 px-4">
|
||||
<div
|
||||
class="text-sm text-blueGray-500 font-semibold py-1 text-center md:text-left"
|
||||
>
|
||||
Copyright © {date}
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold py-1"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-8/12 px-4">
|
||||
<ul class="flex flex-wrap list-none md:justify-end justify-center">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.creative-tim.com/presentation?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://blog.creative-tim.com?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/creativetimofficial/notus-svelte/blob/main/LICENSE.md?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
MIT License
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
8
src/components/Headers/GlobalHeader.svelte
Normal file
8
src/components/Headers/GlobalHeader.svelte
Normal file
@@ -0,0 +1,8 @@
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative bg-teal-500 md:pt-32 pb-32 pt-12">
|
||||
|
||||
</div>
|
||||
73
src/components/Headers/HeaderStats.svelte
Normal file
73
src/components/Headers/HeaderStats.svelte
Normal file
@@ -0,0 +1,73 @@
|
||||
<script>
|
||||
// core components
|
||||
import axios from 'axios';
|
||||
import { onMount } from 'svelte';
|
||||
import CardStats from "components/Cards/CardStats.svelte";
|
||||
|
||||
let infTable = [];
|
||||
onMount(async () => {
|
||||
await axios.get('/api2/wgClients?param=stats')
|
||||
.then( response => {
|
||||
infTable = response.data
|
||||
});
|
||||
console.log(infTable);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="px-4 md:px-10 mx-auto w-full">
|
||||
<div>
|
||||
<!-- Card stats -->
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
|
||||
<CardStats
|
||||
statSubtitle="Connected Now"
|
||||
statTitle="{ infTable.connectedtotal}"
|
||||
statArrow="down"
|
||||
statPercent="3.48"
|
||||
statPercentColor="text-red-500"
|
||||
statDescripiron="Since last week"
|
||||
statIconName="fas fa-chart-pie"
|
||||
statIconColor="bg-teal-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
|
||||
<CardStats
|
||||
statSubtitle="Total Clients"
|
||||
statTitle="{ infTable.clienttotal }"
|
||||
statArrow="down"
|
||||
statPercent="1.10"
|
||||
statPercentColor="text-orange-500"
|
||||
statDescripiron="Since yesterday"
|
||||
statIconName="fas fa-users"
|
||||
statIconColor="bg-teal-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
|
||||
<CardStats
|
||||
statSubtitle="TRAFFIC TOTAL"
|
||||
statTitle="{ infTable.traffictotal }"
|
||||
statArrow="up"
|
||||
statPercent="3.48"
|
||||
statPercentColor="text-emerald-500"
|
||||
statDescripiron="Since last month"
|
||||
statIconName="far fa-chart-bar"
|
||||
statIconColor="bg-teal-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
|
||||
<CardStats
|
||||
statSubtitle="Never Connnected"
|
||||
statTitle="{infTable.brokentotal}"
|
||||
statArrow="up"
|
||||
statPercent="12"
|
||||
statPercentColor="text-emerald-500"
|
||||
statDescripiron="Since last month"
|
||||
statIconName="fas fa-users"
|
||||
statIconColor="bg-red-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
89
src/components/Maps/MapExample.svelte
Normal file
89
src/components/Maps/MapExample.svelte
Normal file
@@ -0,0 +1,89 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
|
||||
// init google maps
|
||||
onMount(async () => {
|
||||
let google = window.google;
|
||||
let map = document.getElementById("map-canvas");
|
||||
let lat = map.getAttribute("data-lat");
|
||||
let lng = map.getAttribute("data-lng");
|
||||
|
||||
const myLatlng = new google.maps.LatLng(lat, lng);
|
||||
const mapOptions = {
|
||||
zoom: 12,
|
||||
scrollwheel: false,
|
||||
center: myLatlng,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
styles: [
|
||||
{
|
||||
featureType: "administrative",
|
||||
elementType: "labels.text.fill",
|
||||
stylers: [{ color: "#444444" }],
|
||||
},
|
||||
{
|
||||
featureType: "landscape",
|
||||
elementType: "all",
|
||||
stylers: [{ color: "#f2f2f2" }],
|
||||
},
|
||||
{
|
||||
featureType: "poi",
|
||||
elementType: "all",
|
||||
stylers: [{ visibility: "off" }],
|
||||
},
|
||||
{
|
||||
featureType: "road",
|
||||
elementType: "all",
|
||||
stylers: [{ saturation: -100 }, { lightness: 45 }],
|
||||
},
|
||||
{
|
||||
featureType: "road.highway",
|
||||
elementType: "all",
|
||||
stylers: [{ visibility: "simplified" }],
|
||||
},
|
||||
{
|
||||
featureType: "road.arterial",
|
||||
elementType: "labels.icon",
|
||||
stylers: [{ visibility: "off" }],
|
||||
},
|
||||
{
|
||||
featureType: "transit",
|
||||
elementType: "all",
|
||||
stylers: [{ visibility: "off" }],
|
||||
},
|
||||
{
|
||||
featureType: "water",
|
||||
elementType: "all",
|
||||
stylers: [{ color: "#ed8936" }, { visibility: "on" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
map = new google.maps.Map(map, mapOptions);
|
||||
|
||||
const marker = new google.maps.Marker({
|
||||
position: myLatlng,
|
||||
map: map,
|
||||
animation: google.maps.Animation.DROP,
|
||||
title: "Hello World!",
|
||||
});
|
||||
|
||||
const contentString =
|
||||
'<div class="info-window-content"><h2>Notus Svelte</h2>' +
|
||||
"<p>A beautiful UI Kit and Admin for Tailwind CSS. It is Free and Open Source.</p></div>";
|
||||
|
||||
const infowindow = new google.maps.InfoWindow({
|
||||
content: contentString,
|
||||
});
|
||||
|
||||
google.maps.event.addListener(marker, "click", function () {
|
||||
infowindow.open(map, marker);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
id="map-canvas"
|
||||
class="relative w-full rounded h-600-px"
|
||||
data-lat="40.748817"
|
||||
data-lng="-73.985428"
|
||||
></div>
|
||||
1
src/components/Modals/Modals.svelte
Normal file
1
src/components/Modals/Modals.svelte
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
43
src/components/Navbars/AdminNavbar.svelte
Normal file
43
src/components/Navbars/AdminNavbar.svelte
Normal file
@@ -0,0 +1,43 @@
|
||||
<script>
|
||||
// core components
|
||||
import UserDropdown from "components/Dropdowns/UserDropdown.svelte";
|
||||
</script>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav
|
||||
class="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-center p-4"
|
||||
>
|
||||
<div
|
||||
class="w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4"
|
||||
>
|
||||
<!-- Brand -->
|
||||
<a
|
||||
class="text-white text-sm uppercase hidden lg:inline-block font-semibold"
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<!-- Form -->
|
||||
<form
|
||||
class="md:flex hidden flex-row flex-wrap items-center lg:ml-auto mr-3"
|
||||
>
|
||||
<div class="relative flex w-full flex-wrap items-stretch">
|
||||
<span
|
||||
class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
|
||||
>
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search here..."
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<!-- User -->
|
||||
<ul class="flex-col md:flex-row list-none items-center hidden md:flex">
|
||||
<UserDropdown />
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
109
src/components/Navbars/AuthNavbar.svelte
Normal file
109
src/components/Navbars/AuthNavbar.svelte
Normal file
@@ -0,0 +1,109 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
import PagesDropdown from "components/Dropdowns/PagesDropdown.svelte";
|
||||
|
||||
let navbarOpen = false;
|
||||
|
||||
function setNavbarOpen() {
|
||||
navbarOpen = !navbarOpen;
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="top-0 absolute z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg"
|
||||
>
|
||||
<div
|
||||
class="container px-4 mx-auto flex flex-wrap items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"
|
||||
>
|
||||
<a
|
||||
use:link
|
||||
class="text-white text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
|
||||
href="/"
|
||||
>
|
||||
Notus Svelte
|
||||
</a>
|
||||
<button
|
||||
class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
|
||||
type="button"
|
||||
on:click="{setNavbarOpen}"
|
||||
>
|
||||
<i class="text-white fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="lg:flex flex-grow items-center bg-white lg:bg-opacity-0 lg:shadow-none rounded shadow-lg {navbarOpen ? 'block':'hidden'}"
|
||||
id="example-navbar-warning"
|
||||
>
|
||||
<ul class="flex flex-col lg:flex-row list-none mr-auto">
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-auth-navbar"
|
||||
>
|
||||
<i
|
||||
class="lg:text-blueGray-200 text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2"
|
||||
/>
|
||||
Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
|
||||
<li class="flex items-center">
|
||||
<PagesDropdown />
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F%23%2F"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="lg:text-blueGray-200 text-blueGray-400 fab fa-facebook text-lg leading-lg"
|
||||
/>
|
||||
<span class="lg:hidden inline-block ml-2">Share</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Svelte%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Svelte%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="lg:text-blueGray-200 text-blueGray-400 fab fa-twitter text-lg leading-lg"
|
||||
/>
|
||||
<span class="lg:hidden inline-block ml-2">Tweet</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://github.com/creativetimofficial/notus-svelte?ref=ns-auth-navbar"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="lg:text-blueGray-200 text-blueGray-400 fab fa-github text-lg leading-lg"
|
||||
/>
|
||||
<span class="lg:hidden inline-block ml-2">Star</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<button
|
||||
class="bg-white text-blueGray-700 active:bg-blueGray-50 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<i class="fas fa-arrow-alt-circle-down"></i> Download
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
101
src/components/Navbars/IndexNavbar.svelte
Normal file
101
src/components/Navbars/IndexNavbar.svelte
Normal file
@@ -0,0 +1,101 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
import IndexDropdown from "components/Dropdowns/IndexDropdown.svelte";
|
||||
|
||||
let navbarOpen = false;
|
||||
|
||||
function setNavbarOpen() {
|
||||
navbarOpen = !navbarOpen;
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="top-0 fixed z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-white shadow"
|
||||
>
|
||||
<div
|
||||
class="container px-4 mx-auto flex flex-wrap items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"
|
||||
>
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
|
||||
href="/"
|
||||
>
|
||||
Notus Svelte
|
||||
</a>
|
||||
<button
|
||||
class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
|
||||
type="button"
|
||||
on:click="{setNavbarOpen}"
|
||||
>
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="lg:flex flex-grow items-center {navbarOpen ? 'block':'hidden'}"
|
||||
id="example-navbar-warning"
|
||||
>
|
||||
<ul class="flex flex-col lg:flex-row list-none mr-auto">
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-index-navbar"
|
||||
>
|
||||
<i class="text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2" />
|
||||
Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
|
||||
<li class="flex items-center">
|
||||
<IndexDropdown />
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F%23%2F"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="text-blueGray-400 fab fa-facebook text-lg leading-lg" />
|
||||
<span class="lg:hidden inline-block ml-2">Share</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Svelte%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Svelte%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
|
||||
target="_blank"
|
||||
>
|
||||
<i class="text-blueGray-400 fab fa-twitter text-lg leading-lg" />
|
||||
<span class="lg:hidden inline-block ml-2">Tweet</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index-navbar"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="text-blueGray-400 fab fa-github text-lg leading-lg" />
|
||||
<span class="lg:hidden inline-block ml-2">Star</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<button
|
||||
class="bg-red-400 text-white active:bg-red-500 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-lg outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<i class="fas fa-arrow-alt-circle-down"></i> Download
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
347
src/components/Sidebar/Sidebar.svelte
Normal file
347
src/components/Sidebar/Sidebar.svelte
Normal file
@@ -0,0 +1,347 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
import NotificationDropdown from "components/Dropdowns/NotificationDropdown.svelte";
|
||||
import UserDropdown from "components/Dropdowns/UserDropdown.svelte";
|
||||
|
||||
let collapseShow = "hidden";
|
||||
|
||||
function toggleCollapseShow(classes) {
|
||||
collapseShow = classes;
|
||||
}
|
||||
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="md:left-0 md:block md:fixed md:top-0 md:bottom-0 md:overflow-y-auto md:flex-row md:flex-nowrap md:overflow-hidden shadow-xl bg-white flex flex-wrap items-center justify-between relative md:w-64 z-10 py-4 px-6"
|
||||
>
|
||||
<div
|
||||
class="md:flex-col md:items-stretch md:min-h-full md:flex-nowrap px-0 flex flex-wrap items-center justify-between w-full mx-auto"
|
||||
>
|
||||
<!-- Toggler -->
|
||||
<button
|
||||
class="cursor-pointer text-black opacity-50 md:hidden px-3 py-1 text-xl leading-none bg-transparent rounded border border-solid border-transparent"
|
||||
type="button"
|
||||
on:click={() => toggleCollapseShow('bg-white m-2 py-3 px-6')}
|
||||
>
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<!-- Brand -->
|
||||
<a
|
||||
use:link
|
||||
class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
||||
href="/"
|
||||
>
|
||||
Notus Svelte
|
||||
</a>
|
||||
<!-- User -->
|
||||
<ul class="md:hidden items-center flex flex-wrap list-none">
|
||||
<li class="inline-block relative">
|
||||
<NotificationDropdown />
|
||||
</li>
|
||||
<li class="inline-block relative">
|
||||
<UserDropdown />
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Collapse -->
|
||||
<div
|
||||
class="md:flex md:flex-col md:items-stretch md:opacity-100 md:relative md:mt-4 md:shadow-none shadow absolute top-0 left-0 right-0 z-40 overflow-y-auto overflow-x-hidden h-auto items-center flex-1 rounded {collapseShow}"
|
||||
>
|
||||
<!-- Collapse header -->
|
||||
<div
|
||||
class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-blueGray-200"
|
||||
>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-6/12">
|
||||
<a
|
||||
use:link
|
||||
class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
||||
href="/"
|
||||
>
|
||||
Notus Svelte
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-6/12 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="cursor-pointer text-black opacity-50 md:hidden px-3 py-1 text-xl leading-none bg-transparent rounded border border-solid border-transparent"
|
||||
on:click={() => toggleCollapseShow('hidden')}
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form -->
|
||||
<form class="mt-6 mb-4 md:hidden">
|
||||
<div class="mb-3 pt-0">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
class="border-0 px-3 py-2 h-12 border border-solid border-blueGray-500 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="my-4 md:min-w-full" />
|
||||
<!-- Heading -->
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
Admin Layout Pages
|
||||
</h6>
|
||||
<!-- Navigation -->
|
||||
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none">
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/dashboard"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/dashboard') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-tv mr-2 text-sm {location.href.indexOf('/admin/dashboard') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/wgLogs"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
WireGuard Logs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/wgProfiles"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
WireGuard Profiles
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/settings"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/settings') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-tools mr-2 text-sm {location.href.indexOf('/admin/settings') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/tables"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/maps"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/maps') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-map-marked mr-2 text-sm {location.href.indexOf('/admin/maps') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
Maps
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="my-4 md:min-w-full" />
|
||||
<!-- Heading -->
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
Auth Layout Pages
|
||||
</h6>
|
||||
<!-- Navigation -->
|
||||
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="/auth/login"
|
||||
>
|
||||
<i class="fas fa-fingerprint text-blueGray-300 mr-2 text-sm"></i>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="/auth/register"
|
||||
>
|
||||
<i class="fas fa-clipboard-list text-blueGray-300 mr-2 text-sm"></i>
|
||||
Register
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="my-4 md:min-w-full" />
|
||||
<!-- Heading -->
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
No Layout Pages
|
||||
</h6>
|
||||
<!-- Navigation -->
|
||||
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="/landing"
|
||||
>
|
||||
<i class="fas fa-newspaper text-blueGray-300 mr-2 text-sm"></i>
|
||||
Landing Page
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="/profile"
|
||||
>
|
||||
<i class="fas fa-user-circle text-blueGray-300 mr-2 text-sm"></i>
|
||||
Profile Page
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="my-4 md:min-w-full" />
|
||||
<!-- Heading -->
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
Documentation
|
||||
</h6>
|
||||
<!-- Navigation -->
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/colors/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fas fa-paint-brush mr-2 text-blueGray-300 text-base"></i>
|
||||
Styles
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-css3-alt mr-2 text-blueGray-300 text-base"></i>
|
||||
CSS Components
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-angular mr-2 text-blueGray-300 text-base"></i>
|
||||
Angular
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-js-square mr-2 text-blueGray-300 text-base"></i>
|
||||
Javascript
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
|
||||
NextJS
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
|
||||
React
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fas fa-link mr-2 text-blueGray-300 text-base"></i>
|
||||
Svelte
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-vuejs mr-2 text-blueGray-300 text-base"></i>
|
||||
VueJS
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
24
src/components/Types/spinner.type.ts
Normal file
24
src/components/Types/spinner.type.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
export type SpinnerTypes = {
|
||||
size: string | number;
|
||||
color: string;
|
||||
unit: string;
|
||||
duration: string;
|
||||
pause: boolean;
|
||||
};
|
||||
|
||||
export type Circle2Types = {
|
||||
colorOuter: string;
|
||||
colorCenter: string;
|
||||
colorInner: string;
|
||||
durationMultiplier: number;
|
||||
durationOuter: string;
|
||||
durationInner: string;
|
||||
durationCenter: string;
|
||||
} & SpinnerTypes;
|
||||
|
||||
export type Circle3Types = {
|
||||
ballTopLeft: string;
|
||||
ballTopRight: string;
|
||||
ballBottomLeft: string;
|
||||
ballBottomRight: string;
|
||||
} & SpinnerTypes;
|
||||
Reference in New Issue
Block a user